/* ==========================================================================
   AMINO — DESIGN TOKENS
   Single source of truth. Every value in the system resolves here.
   Ported 1:1 into a Next.js `styles/tokens.css` later — no logic, no deps.
   ========================================================================== */

:root {
  /* --- COLOUR ------------------------------------------------------------
     Discipline: the palette is monochrome. Ember is a *seasoning*, budgeted
     at <4% of pixels — highlights, motion, streaks, hover, one button per
     viewport. Never a background, never body copy, never a large fill.      */

  --ink:            #0A0A0A;  /* true near-black — dark sections            */
  --ink-raised:     #131313;  /* dark surface one step up                   */
  --ink-card:       #1A1A1A;  /* dark card fill                             */
  --ink-line:       #262626;  /* hairline on dark                           */

  --paper:          #F5F4F2;  /* warm off-white — NOT pure white            */
  --paper-raised:   #FFFFFF;  /* floating card on paper                     */
  --fog:            #E4E3E0;  /* neutral card fill on paper                 */
  --fog-deep:       #D6D5D1;  /* pressed / secondary fill                   */
  --paper-line:     #DCDBD7;  /* hairline on paper                          */

  --steel:          #9A9A96;  /* THE two-tone headline grey. Load-bearing.  */

  /* Muted body tones. Both were originally set by eye and both failed WCAG
     AA at the sizes actually used (11–14px): steel-dim measured 3.99:1 on
     fog, steel-light 3.02:1 on ink — under the 4.5:1 required for normal
     text. Retuned to ~5.2:1 and ~6.7:1. The two-tone headline grey above is
     untouched: it only ever runs at display sizes, where 3:1 is the bar. */
  --steel-dim:      #5C5C58;  /* body copy on paper — 5.2:1 on --fog        */
  --steel-light:    #A2A29D;  /* body copy on ink   — 6.7:1 on --ink-card   */

  --ember:          #FF4D0D;  /* the accent — decorative / large type only  */
  --ember-hot:      #FF6A24;

  /* Ember at 11px on off-white measures 3.02:1 — unreadable and an AA fail.
     These are the accessible variants: --ember-fg for small accent TEXT,
     --ember-fill for a filled button that must carry white text at 4.6:1.
     The bright --ember is still used for streaks, glows and hairlines, where
     no text-contrast requirement applies. */
  --ember-fg:       #FF4D0D;  /* redefined per theme below                  */
  --ember-fill:     #D33F06;  /* white on this = 4.66:1                     */
  --amber:          #FFA033;  /* gradient partner — the light-streak tail   */
  --ember-glow:     rgba(255, 77, 13, 0.38);

  --glass:          rgba(255, 255, 255, 0.06);
  --glass-line:     rgba(255, 255, 255, 0.10);
  --glass-strong:   rgba(255, 255, 255, 0.10);
  --shade:          rgba(10, 10, 10, 0.06);

  --streak: linear-gradient(90deg,
              rgba(255, 77, 13, 0) 0%,
              var(--ember) 22%,
              var(--amber) 52%,
              #FFE0B0 68%,
              rgba(255, 255, 255, 0) 100%);

  /* --- TYPE --------------------------------------------------------------
     One family. The reference decks never exceed weight 500 — impact comes
     from SIZE, not WEIGHT. That single rule is most of the "premium" read.  */

  --font-display: "Geist", "Helvetica Now Display", "Aeonik", -apple-system,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "Geist Mono", "SF Mono", "Roboto Mono", ui-monospace,
                  Consolas, monospace;

  /* Fluid scale — 1440px reference viewport.
     Each step is deliberately far from its neighbour; no timid increments.  */
  --t-mega:   clamp(4.5rem,  19.4vw,  17.5rem);   /*  72 → 280  wordmark     */
  --t-giant:  clamp(3.25rem,  9.7vw,   8.75rem);  /*  52 → 140  hero / CTA   */
  --t-display:clamp(2.5rem,   6.0vw,   5.5rem);   /*  40 →  88  statements   */
  --t-h2:     clamp(2rem,     4.2vw,   3.75rem);  /*  32 →  60  section head */
  --t-h3:     clamp(1.5rem,   2.4vw,   2.125rem); /*  24 →  34  card title   */
  --t-h4:     clamp(1.25rem,  1.6vw,   1.5rem);   /*  20 →  24               */
  --t-lead:   clamp(1.0625rem,1.25vw,  1.25rem);  /*  17 →  20  intro copy   */
  --t-body:   clamp(0.9375rem,1.0vw,   1rem);     /*  15 →  16               */
  --t-small:  0.875rem;                            /*  14                    */
  --t-label:  0.6875rem;                           /*  11  mono eyebrow      */

  --lh-tight:   0.86;   /* mega display — lines nearly touch                 */
  --lh-display: 0.94;
  --lh-head:    1.04;
  --lh-body:    1.62;

  /* Optical tracking: tightens as size grows, loosens for small caps labels */
  --tr-mega:    -0.045em;
  --tr-display: -0.032em;
  --tr-head:    -0.022em;
  --tr-body:    -0.011em;
  --tr-label:    0.14em;

  --w-light:  300;
  --w-book:   400;
  --w-medium: 500;   /* hard ceiling — nothing heavier ships                 */

  /* --- SPACE -------------------------------------------------------------
     Sections breathe at 160–240px. Anything tighter reads corporate.        */
  --s-1:  0.25rem;   --s-2:  0.5rem;    --s-3:  0.75rem;   --s-4:  1rem;
  --s-5:  1.5rem;    --s-6:  2rem;      --s-7:  2.5rem;    --s-8:  3rem;
  --s-9:  4rem;      --s-10: 5rem;      --s-11: 6.5rem;    --s-12: 8rem;
  --s-13: 10rem;     --s-14: 13rem;     --s-15: 15rem;

  --section-y:    clamp(6rem, 12.5vw, 13rem);
  --section-y-lg: clamp(8rem, 16.6vw, 15rem);

  /* --- GRID --------------------------------------------------------------- */
  --max:      1440px;
  --max-text: 720px;
  --gutter:   clamp(1.25rem, 5.5vw, 5rem);
  --cols:     12;
  --col-gap:  clamp(1rem, 1.9vw, 1.75rem);

  /* --- FORM --------------------------------------------------------------- */
  --r-frame: clamp(1.25rem, 3.3vw, 3rem);  /* the page "device" frame        */
  --r-card:  clamp(1rem, 1.9vw, 1.75rem);  /* 16 → 28                        */
  --r-sm:    0.75rem;
  --r-pill:  999px;

  --hair: 1px;

  /* --- MOTION ------------------------------------------------------------
     Two easings do 90% of the work. Everything else is a deliberate accent. */
  --e-out:   cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out — the default   */
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1);     /* section transitions      */
  --e-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --e-back:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* magnetic snap-back       */

  --d-fast: 0.28s;
  --d-mid:  0.6s;
  --d-slow: 1.1s;
  --d-epic: 1.6s;

  /* --- DEPTH -------------------------------------------------------------- */
  --lift:      0 1.5rem 4rem -1rem rgba(10, 10, 10, 0.14);
  --lift-hi:   0 2.5rem 6rem -1.25rem rgba(10, 10, 10, 0.24);
  --lift-dark: 0 2rem 5rem -1rem rgba(0, 0, 0, 0.6);
  --glow:      0 0 3.5rem -0.5rem var(--ember-glow);

  /* --- LAYERS -------------------------------------------------------------- */
  --z-canvas:   0;
  --z-content:  10;
  --z-frame:    20;
  --z-nav:      70;
  --z-cursor:   90;
  --z-overlay:  100;
}

/* Section-scoped theming. Drop `data-theme` on any <section> and every
   descendant resolves the correct pair — no per-element overrides needed. */
[data-theme="ink"] {
  --bg:        var(--bg-ink, var(--ink));
  --bg-raised: var(--ink-raised);
  --surface:   var(--ink-card);
  --fg:        var(--paper);
  --fg-mute:   var(--steel-light);
  /* The two-tone headline grey. #3A3A38 measured 1.74:1 on ink — the receding
     half of a sentence was effectively invisible, not merely quieter. Lifted
     to clear the 3:1 that large text requires while keeping the two halves
     clearly distinct from --fg. */
  --fg-ghost:  #5E5E5A;
  --line:      var(--ink-line);
  /* on near-black, full-strength ember reads at 5.6:1 — no adjustment needed */
  --ember-fg:  var(--ember);
}

[data-theme="paper"] {
  --bg:        var(--paper);
  --bg-raised: var(--paper-raised);
  --surface:   var(--fog);
  --fg:        var(--ink);
  --fg-mute:   var(--steel-dim);
  --fg-ghost:  #888884;   /* 3.2:1 on paper — --steel measured only 2.6:1 */
  --line:      var(--paper-line);
  /* on off-white it must darken to clear 4.5:1 at label sizes */
  --ember-fg:  #B83A00;
}