/* ==========================================================================
   tix² DESIGN SYSTEM — tokens.css
   The single source of truth. Every value on the site resolves to something
   in this file. Change it here, it changes everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLOR — cream
   #F4EEDF, and it has to be this warm to read as cream at all. #FDFBF7 is
   only six points of red-over-blue and renders as white on every screen;
   this is twenty-one and actually looks like paper stock. The card sits one
   step down at 1.095:1, enough to separate a panel and not enough to look
   like a card floating on top.
   The primary action is ink, not a colour. Amber survives from the old
   palette but darkened until it is legible on paper (4.7:1).
   -------------------------------------------------------------------------- */
:root{
  --c-bg:            #F4EEDF;  /* cream ground, 21 points of warmth  */
  --c-surface:       #ECE4CF;  /* card / panel, one tonal step down  */
  --c-elevated:      #E5DCC3;  /* hover surface                      */
  --c-sunken:        #DED4B8;

  --c-hair:          #E6DFCC;  /* barely-there separation            */
  --c-line:          #D8CFB6;  /* a divider that means something     */
  --c-line-strong:   #B9AE90;  /* input rules, active edges          */

  --c-text:          #16181C;  /* ink            15.8:1              */
  --c-text-2:        #565C64;  /* body            6.0:1              */
  --c-text-3:        #5F646C;  /* muted   5.3:1 paper / 4.8:1 panel  */

  --c-accent:        #8A5A07;  /* amber   5.3:1 paper / 4.8:1 panel  */
  --c-accent-hover:  #6F4706;
  --c-accent-press:  #664107;
  --c-accent-dim:    #C9A96A;
  --c-on-accent:     #F4EEDF;

  /* the primary button is ink on paper */
  --c-ink:           #16181C;
  --c-ink-hover:     #2C3037;
  --c-on-ink:        #F7F3E9;

  --c-data:          #1E4E8C;  /* data only       7.4:1              */
  --c-data-dim:      #A8BCD6;

  --c-success:       #1F6B34;
  --c-warning:       #946008;
  --c-error:         #A62B18;

  --c-focus:         #16181C;
}

/* --------------------------------------------------------------------------
   2. TYPE
   Plus Jakarta Sans for display, Inter for body and UI, JetBrains Mono for
   anything that is literally data. Strict division of labour: no family does
   two jobs, and nothing outside the mono list is ever set in mono.
   -------------------------------------------------------------------------- */
:root{
  /* Two families doing two jobs, plus mono for data. Display carries the
     headings and the wordmark; Inter carries everything you actually read
     at body size, where its larger x-height is worth more than character. */
  --f-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid scale, min at 320px / max at 1440px.
     Deliberately smaller at the top than the first pass. A 68px headline is
     not confidence, it is volume. The hierarchy has to come from the ratio
     between steps and from the space around them, not from size alone. */
  --t-h1:      clamp(2.05rem, 1.25rem + 3.5vw, 3.35rem);  /* hero          */
  --t-h2:      clamp(1.6rem,  1.15rem + 1.9vw, 2.3rem);   /* section       */
  --t-h3:      clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);  /* sub           */
  --t-lead:    clamp(1.05rem, 0.98rem + 0.45vw, 1.22rem); /* lede          */
  --t-body:    1rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-label:   0.75rem;

  --lh-tight: 1.08;
  --lh-snug:  1.2;
  --lh-body:  1.62;

  --ls-head:   -0.025em;
  --ls-body:   -0.005em;
  /* Wide tracking on uppercase mono was on every eyebrow. It is now nearly
     nothing, and the eyebrows are mostly gone. */
  --ls-label:   0.02em;
}

/* --------------------------------------------------------------------------
   3. SPACE — 4px base. Section rhythm is fluid, not a shrunk desktop value.
   -------------------------------------------------------------------------- */
:root{
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;

  /* three section rhythms, not one. quiet sections breathe, dense
     sections sit tight, and the difference is the hierarchy. */
  --sec-tight: clamp(56px, 6vw, 88px);
  --sec-base:  clamp(76px, 9vw, 132px);
  --sec-loose: clamp(96px, 13vw, 190px);
  /* relationship gaps: related things sit close, ideas sit apart */
  --gap-tight: clamp(10px, 1.2vw, 16px);
  --gap-mid:   clamp(22px, 2.6vw, 34px);
  --gap-wide:  clamp(40px, 5vw, 72px);
}

/* --------------------------------------------------------------------------
   4. GRID
   Desktop 12 col / 24px gutter / 1240 max. Tablet 8 col. Mobile 4 col.
   -------------------------------------------------------------------------- */
:root{
  --grid-max: 1240px;
  --gutter:   24px;
  --margin:   clamp(20px, 4vw, 40px);
  --cols:     12;
}
@media (max-width: 1023px){ :root{ --cols:8; --gutter:20px } }
@media (max-width: 767px){  :root{ --cols:4; --gutter:16px } }

/* --------------------------------------------------------------------------
   5. RADIUS / BORDER / ELEVATION
   Small radii only. Big rounded cards read as template.
   -------------------------------------------------------------------------- */
:root{
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:6px; --r-full:999px;
  --border: 1px solid var(--c-line);
  --border-strong: 1px solid var(--c-line-strong);
  /* elevation is a border-lightening + a whisper of lift, not a drop shadow */
  /* On a black page a drop shadow is invisible or it is a smudge.
     Depth comes from tone, not from shadow. */
  --e1: none;
  --e2: none;
}

/* --------------------------------------------------------------------------
   6. MOTION
   precise + controlled. No spring, no bounce. transform/opacity only.
   -------------------------------------------------------------------------- */
:root{
  --m-fast:   140ms;   /* hover, button feedback         */
  --m-med:    280ms;   /* cards, menus, nav              */
  --m-slow:   620ms;   /* reveals, hero, large elements  */
  --ease:        cubic-bezier(.22,.61,.36,1);    /* standard out       */
  --ease-in-out: cubic-bezier(.65,.05,.36,1);    /* symmetric          */
  --ease-exit:   cubic-bezier(.4,0,1,1);
}

/* --------------------------------------------------------------------------
   7. Z-INDEX — named, no magic numbers
   -------------------------------------------------------------------------- */
:root{
  --z-base:0; --z-raised:10; --z-sticky:100; --z-nav:200;
  --z-overlay:300; --z-modal:400; --z-toast:500; --z-grain:900;
}