/* ============================================================
   Revvyn — Design Tokens
   One ink on one surface. Three themes share one structure;
   only --bg / --fg / --muted change. Everything else derives
   from --fg via color-mix(), so components never hard-code ink.
   ============================================================ */

/* The three canonical typefaces, loaded here so every surface that imports
   tokens.css also LOADS the fonts it references — no head can ask for Space
   Grotesk while loading Inter. Space Grotesk (display/UI), Space Mono (all
   data/labels, tabular-nums), Instrument Serif italic (marketing accent only).
   @import must precede all other rules. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---- Theme: INK (warm dark) — DEFAULT / signature ---- */
  --bg:    #0B0B0B;   /* near-black, warm */
  --fg:    #ECE9E0;   /* warm paper-white ink */
  --muted: #7C7A72;   /* secondary text / labels */
  --hair:  color-mix(in srgb, var(--fg) 12%, transparent); /* 1px rules, borders */

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif; /* headlines, UI */
  --font-mono:    'Space Mono', ui-monospace, monospace;  /* data, labels, logs, code */
  --font-serif:   'Instrument Serif', Georgia, serif;     /* italic accent ONLY */

  /* ---- Type scale (hero/marketing) ---- */
  --t-hero:    clamp(38px, 5.4vw, 82px);
  --t-h2:      clamp(28px, 3.4vw, 46px);
  --t-body:    clamp(14px, 1.3vw, 17px);
  --t-label:   12px;   /* mono, uppercase, tracked */
  --t-micro:   10px;   /* mono cell labels */

  --tracking-label: 0.16em;
  --tracking-cell:  0.08em;
  --leading-tight:  0.97;

  /* ---- Spacing (8px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---- Radius (deliberately tight — this brand is sharp) ---- */
  --r-sm: 2px;   /* buttons, chips, inputs */
  --r-md: 8px;   /* cards, tab corners */
  --r-lg: 12px;  /* large surfaces, access cards */
  --r-icon: 20px;/* app icon squircle */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.2, .7, .2, 1);
  --ease-draw:  cubic-bezier(.5, 0, .2, 1);
  --dur-fast:   .15s;
  --dur-med:    .7s;
  --dur-draw:   1.1s;

  /* ---- Mark ---- */
  --mark: clamp(180px, 21vw, 320px);
  --mark-stroke: 6;  /* SVG stroke-width at 100×100 viewBox */
}

/* ---- Theme: PAPER (warm light) ---- */
[data-theme="paper"] {
  --bg:    #ECE9E0;
  --fg:    #0B0B0B;
  --muted: #8A877D;
}

/* ---- Theme: NOIR (pure black, max contrast) ---- */
[data-theme="noir"] {
  --bg:    #000000;
  --fg:    #FFFFFF;
  --muted: #6E6E6E;
}

/* No gradients. No accent color. If you ever need ONE spot color
   (status/alert only), use it sparingly and never on the logo:
     --spot: #FF4D2E;   (suggested, optional)            */