/* ================================================================
   Contentious Design System — Design Tokens
   Canonical source: style.contentious.ltd/code/tokens

   All raw design decisions live here. Colour values match the
   upstream hex definitions in contentious-astro/design-tokens.css.
   ================================================================ */

@layer tokens {
  :root {
    /* ============================================
       COLOURS — 11 brand families, 17 shades each
       ============================================ */

    /* Limestone — warm cream neutral (base lightness: 93%) */
    --limestone-900: #B6B6AD;
    --limestone-850: #BDBDB5;
    --limestone-800: #C5C5BC;
    --limestone-750: #CCCCC3;
    --limestone-700: #D4D4CA;
    --limestone-650: #DBDBD1;
    --limestone-600: #E3E3D9;
    --limestone-550: #EAEAE0;
    --limestone-500: #F2F2E7;
    --limestone-450: #F4F4EA;
    --limestone-400: #F5F5EC;
    --limestone-350: #F6F6EF;
    --limestone-300: #F8F8F2;
    --limestone-250: #F9F9F5;
    --limestone-200: #FBFBF7;
    --limestone-150: #FCFCFA;
    --limestone-100: #FEFEFD;

    /* Gloaming — warm charcoal (base lightness: 30%) */
    --gloaming-900: #080808;
    --gloaming-850: #111010;
    --gloaming-800: #1A1918;
    --gloaming-750: #232221;
    --gloaming-700: #2C2A29;
    --gloaming-650: #343332;
    --gloaming-600: #3D3C3A;
    --gloaming-550: #464443;
    --gloaming-500: #4F4D4B;
    --gloaming-450: #63615F;
    --gloaming-400: #777574;
    --gloaming-350: #8A8988;
    --gloaming-300: #9E9D9C;
    --gloaming-250: #B2B1B0;
    --gloaming-200: #C6C5C5;
    --gloaming-150: #DAD9D9;
    --gloaming-100: #EDEDED;

    /* Sunshine — golden yellow (base lightness: 58%) */
    --sunshine-900: #B97232;
    --sunshine-850: #BF7934;
    --sunshine-800: #C48036;
    --sunshine-750: #CA8637;
    --sunshine-700: #D08D39;
    --sunshine-650: #D6953A;
    --sunshine-600: #DB9C3C;
    --sunshine-550: #E1A33D;
    --sunshine-500: #E7AB3F;
    --sunshine-450: #EAB455;
    --sunshine-400: #ECBE6A;
    --sunshine-350: #EFC780;
    --sunshine-300: #F2D195;
    --sunshine-250: #F5DAAB;
    --sunshine-200: #F7E4C1;
    --sunshine-150: #FAEDD6;
    --sunshine-100: #FDF7EC;

    /* Wave — teal/cyan (base lightness: 60%) */
    --wave-900: #0E1111;
    --wave-850: #1D2324;
    --wave-800: #2D3638;
    --wave-750: #3C494B;
    --wave-700: #4B5B5E;
    --wave-650: #5B6E71;
    --wave-600: #6A8185;
    --wave-550: #7A9398;
    --wave-500: #89A6AB;
    --wave-450: #96B0B4;
    --wave-400: #A4BABE;
    --wave-350: #B1C4C7;
    --wave-300: #BECED1;
    --wave-250: #CBD8DA;
    --wave-200: #D9E2E4;
    --wave-150: #E6ECED;
    --wave-100: #F3F6F7;

    /* Fire — coral red (base lightness: 57%) */
    --fire-900: #2B1110;
    --fire-850: #401918;
    --fire-800: #552220;
    --fire-750: #6B2A28;
    --fire-700: #80322F;
    --fire-650: #953B37;
    --fire-600: #AA433F;
    --fire-550: #C04C47;
    --fire-500: #D5544F;
    --fire-450: #D66D67;
    --fire-400: #D8847D;
    --fire-350: #DB9A93;
    --fire-300: #DFAEA7;
    --fire-250: #E4C1BB;
    --fire-200: #E9D2CE;
    --fire-150: #F0E3E0;
    --fire-100: #F7F2F1;

    /* Sapling — soft green (base lightness: 56%) */
    --sapling-900: #1A2118;
    --sapling-850: #273124;
    --sapling-800: #344230;
    --sapling-750: #41523D;
    --sapling-700: #4D6249;
    --sapling-650: #5A7355;
    --sapling-600: #678361;
    --sapling-550: #74946D;
    --sapling-500: #81A479;
    --sapling-450: #8FAE89;
    --sapling-400: #9DB898;
    --sapling-350: #ABC2A7;
    --sapling-300: #B9CCB7;
    --sapling-250: #C7D6C6;
    --sapling-200: #D5E0D5;
    --sapling-150: #E4EBE3;
    --sapling-100: #F2F6F2;

    /* Coffee — warm brown (base lightness: 62%) */
    --coffee-900: #251D1A;
    --coffee-850: #382C27;
    --coffee-800: #4B3C34;
    --coffee-750: #5E4C41;
    --coffee-700: #705D4D;
    --coffee-650: #836E5A;
    --coffee-600: #967F67;
    --coffee-550: #A89174;
    --coffee-500: #BBA481;
    --coffee-450: #C3AF8F;
    --coffee-400: #CAB99E;
    --coffee-350: #D2C4AC;
    --coffee-300: #D9CEBA;
    --coffee-250: #E1D8C8;
    --coffee-200: #E9E3D6;
    --coffee-150: #F0EDE5;
    --coffee-100: #F8F6F3;

    /* Sorbet — warm salmon (base lightness: 62%) */
    --sorbet-900: #271A18;
    --sorbet-850: #3A2725;
    --sorbet-800: #4D3431;
    --sorbet-750: #61413D;
    --sorbet-700: #744E49;
    --sorbet-650: #875B55;
    --sorbet-600: #9A6862;
    --sorbet-550: #AE756E;
    --sorbet-500: #C1827A;
    --sorbet-450: #C89189;
    --sorbet-400: #CFA098;
    --sorbet-350: #D6AEA7;
    --sorbet-300: #DCBCB6;
    --sorbet-250: #E3CAC5;
    --sorbet-200: #EAD8D4;
    --sorbet-150: #F2E6E3;
    --sorbet-100: #F9F3F2;

    /* Amber — warm orange (base: #DF824A) */
    --amber-900: #2D1A0F;
    --amber-850: #432716;
    --amber-800: #59341E;
    --amber-750: #704125;
    --amber-700: #864E2C;
    --amber-650: #9C5B34;
    --amber-600: #B2683B;
    --amber-550: #C97543;
    --amber-500: #DF824A;
    --amber-450: #E2905F;
    --amber-400: #E59F74;
    --amber-350: #E8AD89;
    --amber-300: #EBBB9E;
    --amber-250: #EFC9B2;
    --amber-200: #F3D7C6;
    --amber-150: #F7E5DA;
    --amber-100: #FBF3EE;

    /* Olive — yellow-green (base: #B4A75B) */
    --olive-900: #242112;
    --olive-850: #36321B;
    --olive-800: #484324;
    --olive-750: #5A542E;
    --olive-700: #6C6437;
    --olive-650: #7E7540;
    --olive-600: #908649;
    --olive-550: #A29652;
    --olive-500: #B4A75B;
    --olive-450: #BCB16E;
    --olive-400: #C4BA81;
    --olive-350: #CCC494;
    --olive-300: #D5CEA6;
    --olive-250: #DDD8B9;
    --olive-200: #E6E2CB;
    --olive-150: #EEECDD;
    --olive-100: #F7F6EF;

    /* Lichen — cool neutral grey (base: #DADAD2) */
    --lichen-900: #575754;
    --lichen-850: #686864;
    --lichen-800: #787874;
    --lichen-750: #888883;
    --lichen-700: #999993;
    --lichen-650: #A9A9A3;
    --lichen-600: #B9B9B3;
    --lichen-550: #CACAC2;
    --lichen-500: #DADAD2;
    --lichen-450: #DEDED7;
    --lichen-400: #E3E3DD;
    --lichen-350: #E7E7E2;
    --lichen-300: #ECECE7;
    --lichen-250: #F0F0ED;
    --lichen-200: #F4F4F2;
    --lichen-150: #F9F9F7;
    --lichen-100: #FDFDFD;

    /* ============================================
       SEMANTIC COLOUR ALIASES
       ============================================ */

    /* Star rating gradient: poor (1) → excellent (5) */
    --star-1: var(--fire-500);
    --star-2: var(--amber-500);
    --star-3: var(--sunshine-500);
    --star-4: var(--olive-500);
    --star-5: var(--sapling-500);

    /* Status colours */
    --success-subtle: var(--sapling-100);
    --success-text: var(--sapling-800);
    --warning-subtle: var(--sunshine-100);
    /* amber-800, not sunshine-900: sunshine-900 is a mid-tone orange that fails
       AA at label sizes on every surface in this palette. Matches --chip-warn-fg
       — there is one warning colour, and where it sits doesn't change it. */
    --warning-text: var(--amber-800);
    --error-subtle: var(--fire-100);
    --error-text: var(--fire-800);
    --info-subtle: var(--wave-100);
    --info-text: var(--wave-800);

    /* ============================================
       SPACING — 4pt base with 12px included
       (Impeccable: never skip 12px)
       ============================================ */

    --space-xs: 0.25rem;     /*  4px */
    --space-sm: 0.5rem;      /*  8px */
    --space-sm-plus: 0.75rem; /* 12px */
    --space-md: 1rem;        /* 16px */
    --space-lg: 1.5rem;      /* 24px */
    --space-xl: 2rem;        /* 32px */
    --space-2xl: 3rem;       /* 48px */
    --space-3xl: 4rem;       /* 64px */
    --space-4xl: 6rem;       /* 96px */
    --space-5xl: 8rem;       /* 128px */
    --space-6xl: 10rem;      /* 160px */

    /* ============================================
       BORDERS & RADIUS
       ============================================ */

    --radius: 0.25rem;
    --border-radius-sm: 3px;
    --border-radius-md: 6px;
    --border-radius-lg: 12px;
    --border-radius-full: 9999px;

    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    /* ============================================
       SHADOWS
       ============================================ */

    --shadow-sm: 0 1px 2px rgba(38, 36, 35, 0.08);
    --shadow-md: 0 4px 12px rgba(38, 36, 35, 0.10);
    --shadow-lg: 0 12px 32px rgba(38, 36, 35, 0.14);

    /* ============================================
       MOTION — durations and easing
       Follows Impeccable 100/300/500 rule
       ============================================ */

    /* Durations */
    --duration-instant: 100ms;   /* Button press, toggle, colour change */
    --duration-fast: 200ms;      /* Menu open, tooltip, hover states */
    --duration-normal: 350ms;    /* Accordion, modal, drawer */
    --duration-slow: 500ms;      /* Entrance animations, page reveals */
    --duration-glacial: 800ms;   /* Hero reveals, dramatic entrances */

    /* Exit = 75% of entrance (Impeccable: exits feel faster) */
    --duration-fast-exit: 150ms;
    /* Scroll-triggered reveals on marketing and banded surfaces. 600ms is not a
       new number: it is the most common duration on contentious.ltd (7
       occurrences, every one a diagram reveal) and Voice, Tone & Style arrived
       at it independently. The 350ms it replaces was documented nowhere. It does
       NOT bind app overlays -- a reveal is something you scrolled to, an overlay
       is something you asked for and are waiting on. See
       provenance/States decision 2026-08-01.html. */
    --duration-reveal: 600ms;
    --duration-normal-exit: 250ms;

    /* Easing — exponential curves for natural deceleration */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* Elements entering */
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);       /* Elements leaving */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* State toggles */

    /* A real ease-out. --ease-out above is ease-out-EXPO: ~70% of the travel in
       its first sixth, which is right for something appearing from nothing and
       wrong for anything that TRAVELS, at any duration. Two independent surfaces
       opted out of the token for that reason -- the mobile sheet and a link
       underline -- which is evidence rather than preference. Reveals and
       overlays take this one. */
    --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Marketing motion — the Astro site's scale. These durations are correct for
       what they are: 800ms on a hero fade is right, and pulling the site to the
       app's 350ms would visibly break it. They are NOT the app scale.
       App UI uses --motion-state (200ms) / --motion-reveal (350ms) /
       --motion-exit (150ms) from the semantic layer, and nothing else.
       Renamed 31 July 2026 because `--transition-fast` is the obvious name to
       reach for and it is 300ms — a 4x-wrong hover. Removing the trap beats
       documenting it. */
    --marketing-transition-fast: 300ms ease-in-out;
    --marketing-transition-base: 800ms ease-in-out;
    --marketing-transition-slow: 1.5s ease-in-out;
    --marketing-transition-slower: 3s ease-in-out;
    --marketing-transition-extra-slow: 6s ease-in-out;

    /* The --transition-* aliases were removed in 0.5.0. They existed to give the
       Astro site runway, and the site migrated in the same change, so the runway
       was never needed. The trap is now gone rather than documented, which means
       nothing has to remember the rule. */

    /* ============================================
       Z-INDEX
       ============================================ */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;

    /* ============================================
       LAYOUT
       ============================================ */

    --container-max-width: 1080px;
    --content-max-width: 1080px;
    --width-narrow: 40rem;
    --width-content: 80rem;
    --width-prose: 65ch;
    --page-padding: clamp(2rem, 6vw, 5rem);

    /* ============================================
       BREAKPOINTS (reference values)
       CSS custom properties can't be used in
       media queries directly, but these document
       the scale and can be used in calc() or JS.
       ============================================ */

    --breakpoint-xs: 32rem;   /* 512px */
    --breakpoint-sm: 40rem;   /* 640px */
    --breakpoint-md: 48rem;   /* 768px */
    --breakpoint-lg: 64rem;   /* 1024px */
    --breakpoint-xl: 80rem;   /* 1280px */
    --breakpoint-2xl: 96rem;  /* 1536px */
  }
}