/* ==========================================================================
   SentinelXR — design tokens
   --------------------------------------------------------------------------
   The ONLY file in this project where a colour, size or duration literal is
   written. Everything else references var(--token).

   Generated from the brand system's canonical source
   (ui-kit/tokens/tokens.source.js). If a value changes there, change it here
   and nowhere else.
   ========================================================================== */

:root {

  /* --- Colour: primary ---------------------------------------------------- */
  --vigil:              #3A4630;  /* Primary dark. Nav, dark bands, footers  */
  --vigil-deep:         #2B3324;  /* Panels sitting ON Vigil Grove           */
  --vigil-soft:         #4C5A40;  /* Hover / chips on a Vigil ground         */
  --beacon:             #D2603A;  /* Accent AND the logo. Never body text    */
  --beacon-deep:        #9E4526;  /* Terracotta text + filled buttons, light */
  --beacon-press:       #853A20;  /* Pressed / hover on a filled button      */
  --beacon-soft:        #F2A98D;  /* Terracotta text on a dark ground        */
  --orin:               #5F7050;  /* Marks what Orin says. Under 10% of a UI */

  /* --- Colour: neutral --------------------------------------------------- */
  --ink:                #262B33;  /* Primary text on light grounds           */
  --slate:              #4A515C;  /* Secondary body text                     */
  --slate-soft:         #565D69;  /* Lightest text on light                  */
  --paper:              #EDF1F6;  /* Page canvas                             */
  --paper-2:            #E3E9F1;  /* Second surface / alternating bands      */
  --surface:            #FFFFFF;  /* Cards                                   */
  --line:               #DCE1E8;  /* Borders, dividers                       */
  --line-dark:          #6E7C60;  /* Borders on a Vigil ground               */
  --on-dark:            #C6D2B6;  /* Muted text on Vigil Grove               */

  /* --- Colour: functional ------------------------------------------------ */
  --alert-deep:         #8A2846;  /* Errors. Functional only                 */
  --alert-line:         #E0BFC9;  /* Error card border                       */
  --alert-tint:         #F6E9ED;  /* Invalid field background                */
  --success-deep:       #2F5238;  /* Positive labels. Functional only        */
  --success-tint:       #E9F0EA;

  /* --- Colour: Orin surfaces --------------------------------------------- */
  --assistant-surface:  #EDF1EA;  /* Ground for anything Orin said           */
  --assistant-border:   #C3D0B8;
  --tint-warm:          #F7EAE3;  /* Terracotta tint: hover, tags, body copy
                                     on the terracotta band                  */

  /* --- Colour: mastery, dark ground -------------------------------------- */
  /* The light-ground mastery scale is unreadable on Vigil Grove — both
     --alert and --success are darker than the panel. Graphic use only. */
  --mastery-strong-dark:    #A8C48A;
  --mastery-weak-dark:      #F2A98D;
  --mastery-untouched-dark: #6E7C60;

  /* --- Gradient ---------------------------------------------------------- */
  --grad-terracotta: radial-gradient(120% 100% at 50% 0%, #8E3D20 0%, #7A3319 100%);

  /* --- Type -------------------------------------------------------------- */
  --font-sans: 'Lexend', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid display sizes. clamp() so a 1440 laptop and a 2560 monitor both
     get a sensible hero without a media query. */
  --text-hero:    clamp(48px, 7vw,   92px);
  --text-h1:      clamp(38px, 5.2vw, 68px);
  --text-h2:      clamp(30px, 3.6vw, 46px);
  --text-h3:      clamp(28px, 3.2vw, 42px);
  --text-h4:      clamp(26px, 3vw,   40px);
  --text-statement: clamp(30px, 4.2vw, 56px);

  --text-lede-lg: clamp(19px, 2vw,   24px);
  --text-lede:    clamp(17px, 1.7vw, 21px);
  --text-body-lg: 19px;
  --text-body:    16px;
  --text-sm:      15.5px;
  --text-xs:      13.5px;
  --text-eyebrow: 13px;

  --leading-tight:  1.05;
  --leading-snug:   1.15;
  --leading-normal: 1.6;
  --leading-body:   1.65;

  --track-tight:   -.028em;
  --track-snug:    -.025em;
  --track-eyebrow: .16em;

  /* --- Space: 4px base --------------------------------------------------- */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-44:  44px;
  --space-56:  56px;
  --space-88:  88px;
  --space-96:  96px;

  /* --- Radius ------------------------------------------------------------ */
  --radius-control: 10px;
  --radius-card:    16px;
  --radius-panel:   18px;
  --radius-pill:    999px;

  /* --- Elevation --------------------------------------------------------- */
  --shadow-card:  0 1px 2px rgb(38 43 51 / .05), 0 10px 28px rgb(38 43 51 / .09);
  --shadow-lift:  0 18px 44px rgb(58 20 8 / .24);
  --shadow-panel: 0 24px 64px rgb(38 43 51 / .32), 0 4px 12px rgb(38 43 51 / .2);
  --shadow-fab:   0 8px 28px rgb(38 43 51 / .28), 0 2px 6px rgb(38 43 51 / .18);

  /* --- Motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(.2, .8, .2, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;

  /* --- Layout ------------------------------------------------------------ */
  --wrap-max:  1280px;
  --gutter:    var(--space-32);

  /* --- Z-index: no component writes a numeric z-index -------------------- */
  --z-motif:   0;
  --z-content: 1;
  --z-nav:     40;
  --z-guide:   80;
}