/* Design tokens. Squish Lab is a designer-toy box: a sage photo sweep, pine ink, and one
   warm-white blister label that carries the identity. Butter yellow is spent only on the
   primary action; the squishies bring every other color.
   Light values on :root; dark values redefine the same tokens. The label stays a printed
   card (warm white, pine ink) in both themes, like the real thing would. */

@font-face { font-family: "Mochiy Pop One"; font-weight: 400; font-display: swap; src: url("../fonts/mochiy-pop-one-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-weight: 500; font-display: swap; src: url("../fonts/zen-maru-gothic-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-weight: 700; font-display: swap; src: url("../fonts/zen-maru-gothic-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-weight: 900; font-display: swap; src: url("../fonts/zen-maru-gothic-latin-900-normal.woff2") format("woff2"); }

:root {
  /* palette */
  --sage: #e7ece9;
  --pine: #1b2824;
  --label: #f7f9f8;          /* warm white: panels and printed labels */
  --sage-grey: #90a39c;      /* rules, silhouettes, empty marks (not for body text: too light) */
  --butter: #f2c94c;         /* primary actions only */

  --bg: var(--sage);
  --mat: #e3e6e4;                           /* backdrop paper before the squishy's tint */
  --sweep-light: rgba(255, 255, 255, .62);  /* spotlight falling on the paper */
  --sweep-floor: rgba(27, 40, 36, .12);     /* where the paper curves into the floor */
  --grain: .07;
  --panel: var(--label);
  --ink: var(--pine);
  --muted: #56665f;                         /* secondary text, AA on sage and warm white */
  --line: #d0dbd5;
  --chip: #edf2ef;
  --chip-hover: #e2e9e5;
  --chip-on: var(--pine);
  --chip-on-ink: var(--label);
  --primary: var(--butter);
  --primary-ink: var(--pine);
  --focus: var(--pine);
  --accent: var(--butter);                  /* JS reads this for the camera grip ring */

  /* the printed label: the same in both themes */
  --tag-bg: #f7f9f8;
  --tag-ink: #1b2824;
  --tag-muted: #56665f;
  --tag-rule: #c9d5cf;

  --f-name: "Mochiy Pop One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* kept for code that still reads the old names */
  --f-display: var(--f-name);

  --r-s: 6px;        /* labels and cards: printed card stock, barely rounded */
  --r-m: 10px;       /* controls */

  /* motion: fast ease-out for things that answer a tap */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);   /* iOS-like sheet curve */
  --ease-swing: cubic-bezier(.34, 1.56, .64, 1); /* a label settling on its hook */
  --t-press: .14s;
  --t-move: .26s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101816; --mat: #161b19; --sweep-light: rgba(255, 255, 255, .06); --sweep-floor: rgba(0, 0, 0, .4); --grain: .1;
    --panel: #18221f; --ink: #e6eeea; --muted: #a3b3ac; --line: #2a3833; --chip: #1f2b28; --chip-hover: #26342f;
    --chip-on: #e6eeea; --chip-on-ink: #15201d; --focus: #f2c94c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101816; --mat: #161b19; --sweep-light: rgba(255, 255, 255, .06); --sweep-floor: rgba(0, 0, 0, .4); --grain: .1;
  --panel: #18221f; --ink: #e6eeea; --muted: #a3b3ac; --line: #2a3833; --chip: #1f2b28; --chip-hover: #26342f;
  --chip-on: #e6eeea; --chip-on-ink: #15201d; --focus: #f2c94c;
  color-scheme: dark;
}