@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400..800&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..600&display=swap');

/* ==========================================================================
   kiaribot.com — tokens
   --------------------------------------------------------------------------
   THE ONLY FILE IN THIS PROJECT THAT CONTAINS A COLOUR LITERAL.
   If you are writing a hex, rgb(), or hsl() anywhere else, stop.

   This file defines RAW values only: the palette, the three faces, the type
   scale, spacing, radii, easing, z-index. It never defines a *resolved*
   name like --text or --ground. Those live in site.css's `ground` layer and
   flip with the section's data-ground attribute.

   That split is load-bearing, not tidiness. site.css puts its rules in
   @layer, and unlayered declarations beat layered ones no matter how
   specific the layered selector is. If this file declared --text on :root,
   [data-ground="paper"] in site.css could never override it. So: no name
   defined here is ever redefined there. Zero overlap. Keep it that way.

   Load order in base.html: tokens.css, then site.css.
   ========================================================================== */

:root {

  /* --- palette: dark. watching the machine. ------------------------------ */
  --ink:          #080C18;
  --ink-lift:     #0F1526;
  --ink-panel:    #161E33;
  --ink-line:     #232D48;

  /* --- palette: light. reading about the product. cold, never cream. ----- */
  --paper:        #EDF0F5;
  --paper-lift:   #FFFFFF;
  --paper-line:   #C9D2E0;

  /* --- palette: text ----------------------------------------------------- */
  --on-ink:       #E8ECF6;
  --on-ink-dim:   #8B96B0;
  --on-ink-faint: #5A6480;
  --on-paper:     #0A0E1A;
  --on-paper-dim: #4A5568;

  /* --- palette: the semantic pair ---------------------------------------- *
   * blue is the bot. orange is the human. never decorative.
   * measured contrast (see site.css header for the full table):
   *   --bot        on --ink   6.10:1   ok for body text
   *   --bot        on --paper 2.80:1   FAILS as text, marks only
   *   --bot-quiet  on --paper 5.34:1   ok for body text
   *   --human      on --ink   7.53:1   ok for body text
   *   --human      on --paper 2.27:1   FAILS as text, marks only
   *   --human-quiet on --paper 3.90:1  large text only
   * The ground layer in site.css picks the right one for you. Use
   * --bot-text / --human-text, not these, when colouring text.           */
  --bot:          #4C8DFF;
  --bot-quiet:    #2E5FB8;
  --human:        #FF7A3D;
  --human-quiet:  #C4562A;

  --warn:         #F5C542;

  /* --- shadow / scrim tints (literals live here too) ---------------------- */
  --tint-ink-90:   rgb(8 12 24 / 0.90);
  --tint-ink-70:   rgb(8 12 24 / 0.70);
  --tint-ink-40:   rgb(8 12 24 / 0.40);
  --tint-ink-16:   rgb(8 12 24 / 0.16);
  --tint-ink-08:   rgb(8 12 24 / 0.08);
  --tint-paper-90: rgb(237 240 245 / 0.90);
  --tint-paper-12: rgb(237 240 245 / 0.12);
  --tint-paper-06: rgb(237 240 245 / 0.06);

  /* --- faces. three, three jobs. always a real fallback stack. ------------ */
  --font-display: 'Bricolage Grotesque', 'Arial Black', 'Helvetica Neue',
                  system-ui, sans-serif;
  --font-body:    'Instrument Sans', ui-sans-serif, system-ui, 'Segoe UI',
                  Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SFMono-Regular',
                  'Cascadia Mono', Menlo, Consolas, monospace;

  /* --- type scale. these seven steps and no others. ---------------------- */
  --t-display: clamp(3.5rem, 9vw, 9rem);
  --t-title:   clamp(2.25rem, 5vw, 4.5rem);
  --t-head:    clamp(1.5rem, 2.6vw, 2.25rem);
  --t-lead:    clamp(1.125rem, 1.5vw, 1.375rem);
  --t-body:    clamp(1rem, 1.05vw, 1.0625rem);
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* --- leading and tracking ---------------------------------------------- */
  --lh-tight:  0.94;   /* display */
  --lh-snug:   1.08;   /* title / head */
  --lh-normal: 1.5;    /* lead */
  --lh-loose:  1.65;   /* body prose */
  --lh-flat:   1.2;    /* numbers, ui */

  --tr-tight:  -0.035em;  /* display */
  --tr-snug:   -0.02em;   /* title, head */
  --tr-normal: -0.005em;  /* body */
  --tr-wide:   0.02em;    /* small caps-ish labels */
  --tr-caps:   0.12em;    /* eyebrows, micro labels */

  --wt-body:    400;
  --wt-medium:  500;
  --wt-semi:    600;
  --wt-display: 700;
  --wt-heavy:   800;

  /* --- spacing. one scale. ----------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* fluid section rhythm. --space-sec is the default vertical padding of a
     .section; --space-gutter is the page edge inset at every width. */
  --space-sec:    clamp(4rem, 9vw, 8rem);
  --space-gutter: clamp(1.25rem, 4vw, 3rem);

  /* --- measures ---------------------------------------------------------- */
  --w-wrap:   72rem;   /* 1152px, the default column */
  --w-wide:   90rem;   /* 1440px, charts and arena */
  --w-narrow: 34rem;   /* ~68ch of body text */
  --w-prose:  62ch;

  /* --- radii. the brief bans the zero-radius broadsheet look. ------------- */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* --- strokes ----------------------------------------------------------- */
  --stroke:      1px;
  --stroke-bold: 2px;

  /* --- easing ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0.3);
  --ease-inout: cubic-bezier(0.65, 0.02, 0.25, 1);
  --ease-snap:  cubic-bezier(0.2, 1.1, 0.35, 1);

  --dur-fast: 120ms;
  --dur-mid:  240ms;
  --dur-slow: 520ms;
  --dur-line: 900ms;   /* signature-line reveals */

  /* --- elevation --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px var(--tint-ink-16);
  --shadow-md: 0 4px 16px -4px var(--tint-ink-40);
  --shadow-lg: 0 24px 60px -20px var(--tint-ink-70);

  /* --- z-index. the whole scale. do not invent a value. ------------------ */
  --z-under:   0;   /* section grounds, seams */
  --z-line:    1;   /* the signature continuous line */
  --z-raise:   2;   /* section content, panels, anything over the line */
  --z-sticky: 20;   /* sticky sub-headers inside a section */
  --z-nav:   100;   /* site nav */
  --z-overlay: 200; /* mobile nav sheet, dialogs */
  --z-toast: 300;
}