/* Face Jam design system — token layer.
 *
 * Names and values follow the Calder design system (D-077), which renamed
 * part of the original Figma token tree; path with "/" -> "-":
 *   color/accent/red   -> --color-accent-red
 *   spacing/md         -> --space-md
 *   radius/pill        -> --radius-pill
 *   shadow/graphic     -> --shadow-graphic
 *   type/title         -> --text-title-size / -lh / -ls
 *
 * COLOUR DISCIPLINE. Colour values are defined here and referenced as
 * var(--...) everywhere else. tests/tokens.test.js enforces this for every
 * stylesheet and for inline style="" attributes in JS — if you are about to
 * paste a hex into styles.css, add a token here instead.
 *
 * Two things sit outside that rule on purpose. constants.js and brushes.js
 * export the sheet grounds and the ink palette as hex: that is content, not
 * styling, and the test exempts them by name. A handful of canvas fallbacks
 * (canvasStore.js, featureArt.js, qr.js) are literals the test does not yet
 * reach — see "Revisit: how firmly is colour single-sourcing actually
 * enforced?" in docs/00-overview.md. Neither is licence to add more.
 *
 * Component dimensions (the 40px small button, the 20px swatch) are NOT
 * tokenised: they come from the spec's component definitions rather than the
 * spacing scale, and inventing tokens Figma lacks would break traceability.
 *
 * docs/08-test-cases.md §tokens.test.js is the full account of what is
 * checked; this comment is a pointer to it, not a second source.
 *
 * Zero build step (D-022): plain custom properties, loaded by a <link> ahead
 * of styles.css so screens can override component rules but never token values.
 */

/* Space Grotesk, self-hosted rather than CDN-loaded: LAN/offline play (D-029)
 * would otherwise fall back to a system face and silently break every
 * measurement in the type scale below (D-051). Variable font — one file spans
 * 400-700, so the weight range is declared rather than shipping three files.
 * serve.mjs needs the .woff2 MIME entry or this 404s over LAN only. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ===== Primitive color ===== */
  --color-background: #f6f1e7;
  --color-content-primary: #201f1c;
  --color-content-secondary: #6c6659;
  --color-content-on-dark: var(--color-background);
  --color-accent-red: #f60c00;
  --color-accent-pink: #ff87c3;
  --color-accent-blue: #0050e0;
  --color-accent-yellow: #ffc400;
  --color-accent-orange: #fb5628;
  --color-accent-teal: #0a362e;

  /* Button surface (D-068). Not in the Figma components yet: Rachel's
   * 2026-10-15 direction is that buttons go flat in this warm grey with a
   * black label. The pressed shade is the prototype's own — Figma defines no
   * pressed state (D-055). */
  --color-surface-button: #e6e0d0;
  --color-surface-button-pressed: #d6cfbc;

  /* Sheet grounds (D-076). Softer than the accents, which stay the inks, the
   * accent button and illustration. The draw screen reads these as hex from
   * SHEET_BACKGROUNDS in constants.js (content, not styling), so keep the two
   * in sync. */
  --color-surface-red: #f8705a;
  --color-surface-pink: #ff8ab8;
  --color-surface-blue: #3fa0d6;
  --color-surface-sky: #a8c8ec;
  --color-surface-yellow: #ffd75c;
  --color-surface-orange: #ff8a3d;
  --color-surface-green: #3f9a5c;
  --color-surface-night: #26302b;


  /* Surfaces and lines the spec leaves as literals in the reference file, or
   * that the prototype needs and Figma has no token for. Kept here rather than
   * inline so the no-literals-outside-tokens rule stays absolute. */
  --color-app-shell: var(--color-background); /* the ground behind the app frame; matches it so the frame edge doesn't show on wide windows */
  --color-border: #444444; /* divider and border lines; today the toolbar divider */
  --color-border-subtle: rgba(0, 0, 0, 0.14); /* light lines on cream */
  --color-scrim: rgba(0, 0, 0, 0.62);
  --color-disabled: rgba(0, 0, 0, 0.28);

  /* ===== Semantic color ===== */
  /* D-068: every flat button, primary and secondary alike, takes the button
   * surface. The accent is what survives as the one hero action, landing's
   * Play — blue since D-087, and also the draw screen's selected tool and
   * its Submit (D-085, D-086). Red stays an ink and an illustration colour. */
  --color-ui-primary: var(--color-surface-button);
  --color-ui-accent: var(--color-accent-blue);
  /* Defined for parity with Figma; no component uses it. */
  --color-ui-tertiary: var(--color-accent-teal);

  /* ===== Spacing ===== */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 56px;

  /* ===== Radius ===== */
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-pill: 100px;

  /* ===== Shadow =====
   * Two languages, not an elevation scale. shadow/graphic is the hard teal
   * offset that makes a control look pressable; shadow/soft is ambient depth
   * for things that just sit there. Label buttons take graphic, icon buttons
   * and static cards take soft. */
  --shadow-graphic: 0 6px 0 0 var(--color-accent-teal);
  --shadow-graphic-sm: 0 4px 0 0 var(--color-accent-teal);
  --shadow-soft: 0 7px 30px 3px rgba(0, 0, 0, 0.15);

  /* ===== Motion (candidate tokens, D-055) =====
   * Figma documents no timing. The press numbers are picked by feel and kept
   * here so a future motion scale has one place to reconcile. A flat button
   * (D-068) has no shadow to sink into, so it travels a fixed 2px; the hero
   * button travels its own shadow-graphic offset. */
  --press-dur: 70ms;
  --press-travel-flat: 2px;
  --press-travel-graphic: 6px;

  /* ===== Type — base 16, golden ratio (phi 1.618) ===== */
  --text-display-size: 68px;
  --text-display-lh: 72px;
  --text-display-ls: -0.02em;

  --text-headline-size: 42px;
  --text-headline-lh: 48px;
  --text-headline-ls: -0.01em;

  --text-title-size: 26px;
  --text-title-lh: 32px;
  --text-title-ls: 0em;

  --text-body-size: 16px;
  --text-body-lh: 24px;
  --text-body-ls: 0em;

  --text-caption-size: 10px;
  --text-caption-lh: 14px;
  --text-caption-ls: 0.02em;

  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  /* ===== Layout ===== */
  /* D-041: responsive up to a cap, rather than one fixed device viewport. The
   * spec says "single-density mobile app" — that describes what Figma holds,
   * not a ban on scaling. See the plan's section 4. */
  --app-max-width: 720px;
}

/* ===== Type roles as utilities =====
 * So a screen applies one role rather than three properties, and a change to
 * the scale lands everywhere at once. */
.t-display,
.t-headline,
.t-title,
.t-body,
.t-caption {
  font-family: var(--font-display);
}
.t-display {
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-ls);
  font-weight: 700;
}
.t-headline {
  font-size: var(--text-headline-size);
  line-height: var(--text-headline-lh);
  letter-spacing: var(--text-headline-ls);
  font-weight: 700;
}
.t-title {
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
  letter-spacing: var(--text-title-ls);
  font-weight: 700;
}
.t-body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  font-weight: 400;
}
.t-caption {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  letter-spacing: var(--text-caption-ls);
  font-weight: 500;
}
.t-muted {
  color: var(--color-content-secondary);
}