/*
 * tokens.css — THE canonical Rheveal design tokens.
 *
 * Both surfaces read this file; neither redefines it:
 *   - apps/web  imports it at the top of src/styles/tokens.css
 *   - apps/site symlinks it (apps/site/tokens.css) and aliases its short names
 *
 * Mirrored in the Pencil design-system board. An undefined Pencil variable
 * bakes to #000000 at creation, so keep the two in sync.
 */
:root {
  /* — Palette (semantic) — */
  --brand-ink: #150f08;       /* darkroom ground */
  --brand-panel: #241b10;     /* cards, sheets, raised chrome */
  --brand-view: #100b06;      /* viewfinder well (darkest) */
  --brand-cream: #f6ecd8;     /* primary text */
  --brand-muted: #b7a583;     /* secondary text */
  --brand-dim: #7a6e58;       /* tertiary text / captions */
  --brand-gold: #f4b400;      /* THE accent — CTAs only */
  --brand-gold-hot: #ffce4d;  /* hover / glow */
  --brand-red: #d9352b;       /* datestamp + destructive TEXT only */
  --brand-hair: #3a2e1a;      /* hairlines, borders */
  --brand-stock: #6fb3ac;     /* film-stock teal — marketing site only */

  /* — Radius — ONE value for every rectangle + pill for round things.
     The rectangle knob is --radius (4px), defined with the shadcn tokens
     in the app; the old sm/md/lg tiers are gone by design (do not re-add). */
  --radius-pill: 999px; /* chips, badges, avatars, the shutter */

  /* — Spacing scale (base-4) — */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;  --space-12: 48px;

  /* — Semantic form rhythm — */
  --space-label: 8px;    /* label → its input */
  --space-field: 24px;   /* field → next field */
  --space-section: 48px; /* form group → group */
  --control-px: 16px;    /* input side padding (text never touches an edge) */

  /* — Control heights — inputs AND buttons share ONE scale; md (40) is the
     default and the input height. An input and a button are never different
     heights. — */
  --control-h-sm: 32px;  /* toolbars, tabs, dense actions */
  --control-h: 40px;     /* DEFAULT — inputs + md buttons */
  --control-h-lg: 48px;  /* standalone CTAs */
  --btn-px: 28px;        /* button side padding (Pencil kit); inputs use --control-px */
  --track-button: 2px;   /* button-label letter spacing ("+2 tracking") */
  --touch-target: 44px;  /* minimum guest-facing tap target (docs/standards/ux.md) */

  /* ── Typefaces ──────────────────────────────────────────────────────────────
     Mirrors the Pencil board's $font-display / $font-body / $font-mono.

     ⚠ Archivo Black is a SEPARATE FAMILY — it is NOT Archivo at weight 900.
     They are different drawings. It ships ONE weight, so it is always set at
     font-weight 400. Never fake-bold it.

     ⚠ THE 28px RULE — display face only where it has the real estate:
        Archivo Black  →  ONLY --text-display-xl (36px) and --text-display-lg (28px)
        Archivo        →  EVERYTHING at 24px and below (title, heading, eyebrow,
                          body, ui, caption, button)
     A heavy poster grotesk below 28px closes its counters and reads as a smudge,
     not as impact. This rule is the design system's, not a preference — it is
     encoded in the Pencil type ramp (Section TYPE RAMP), which binds $font-display
     to the two DISPLAY rows and $font-body to every row beneath them.

     ✅ THE ONE EXEMPTION — THE WORDMARK (decided 2026-07-14).
     The logotype "RHEVEAL" is Archivo Black at ANY size — header (19px), footer
     (15px), email sender (14px). A wordmark is not running type: it is recognised
     as a SHAPE, not read. The 28px rule guards readability, which does not apply
     to a mark. There is no "wordmark" row in the type ramp because a wordmark is
     not a type tier — it is a logo. Do NOT "fix" the wordmark to Archivo.

     Eyebrows were considered for a second exemption (their .22em tracking already
     opens the counters) and DECLINED — they take their character from the tracking
     and the red, not from the weight. Eyebrows are Archivo. — */
  --font-display: 'Archivo Black', 'Archivo Variable', system-ui, sans-serif;
  --font-body: 'Archivo Variable', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* — Type scale (px size · face/weight) — base-4. Oswald is DROPPED. — */
  --text-display-xl: 36px; /* Archivo Black 400 — hero ("THE PHOTOS ARE IN.") */
  --text-display-lg: 28px; /* Archivo Black 400 — big titles · FLOOR for the display face */
  --text-title: 24px;      /* Archivo 700 — screen titles */
  --text-heading: 20px;    /* Archivo 700 — card/dialog titles */
  --text-eyebrow: 12px;    /* Archivo 600 UPPER +tracking — labels */
  --text-body: 16px;       /* Archivo 400 — default body; = input size (no iOS zoom) */
  --text-ui: 14px;         /* Archivo 500 — control labels, dense/secondary text */
  --text-caption: 12px;    /* Archivo 400 — captions / help */
  --text-button: 14px;     /* Archivo 600 UPPER +2 tracking */
  --text-data: 12px;       /* Space Mono — datestamps, counts */
}