/* ==========================================================================
   ChromeGuard prototype: design tokens
   Source of truth for colour, type, spacing and motion.
   Brand rules applied (Brand Black Box, per Contractor Scope v1.6 §5):
   - ChromeGuard Black #000000 and ChromeGuard Yellow #ECBD37 only
   - All dark surfaces are pure black
   - Yellow is never used for type on light surfaces
   - Max one yellow type element per page (use .is-signal)
   - 12-col grid, 1536 max content width, breakpoints 768 / 1024, 8px spacing scale
   - 44px minimum touch targets
   Type system (approved 3 Nov): Barlow Condensed for headlines and big
   figures, Instrument Sans for everything else, JetBrains Mono on the receipt.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --cg-black: #000000;
  --cg-yellow: #ECBD37;
  --cg-yellow-deep: #D6A622;   /* hover / pressed state for yellow fills only */
  --cg-white: #FFFFFF;
  --paper: #F1EEE6;            /* receipt and drawing-sheet paper */

  /* --- Warm-cast neutral scale (working values, validate vs Black Box) --- */
  --n-25:  #FCFBF9;
  --n-50:  #F7F5F1;
  --n-100: #EFECE6;
  --n-200: #E2DED5;
  --n-300: #CBC6BA;
  --n-400: #A9A397;
  --n-500: #858073;
  --n-600: #5E5A50;
  --n-700: #403D36;
  --n-800: #2A2823;
  --n-900: #171613;
  --grey-50: #F3F3F2;          /* cool light grey: quiet section fill (homepage FAQ) */

  /* --- Semantic --------------------------------------------------------- */
  --c-danger: #C4432B;
  --c-ok: #3D8B4F;

  /* --- Type families ---------------------------------------------------- */
  --font-display: "Barlow Condensed", system-ui, sans-serif;   /* headlines */
  --font-data: "Barlow Condensed", system-ui, sans-serif;      /* big figures */
  --font-body: "Instrument Sans", system-ui, sans-serif;       /* reading text */
  --font-ui: "Instrument Sans", system-ui, sans-serif;         /* buttons, nav, text links */
  --font-label: "Instrument Sans", system-ui, sans-serif;      /* small caps labels */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;      /* receipt, field record */
  --body-stretch: 100%;
  --ui-stretch: 92%;          /* Instrument Sans width axis: 75–100% */
  --ui-tracking: 0.06em;
  --label-stretch: 85%;

  --display-weight: 700;
  --display-transform: uppercase;
  --display-tracking: -0.005em;
  --display-leading: 0.92;
  --display-stretch: 100%;
  --display-scale: 1.12;       /* condensed faces run larger to hold presence */

  --label-weight: 600;
  --label-transform: uppercase;
  --label-tracking: 0.1em;

  --data-weight: 600;
  --data-tracking: -0.01em;
  --data-scale: 1.1;

  /* --- Nine type roles (px values at desktop, fluid down to mobile) ------ */
  --t-display: clamp(3rem, 2rem + 4.2vw, 5.75rem);   /* 48 → 92 */
  --t-h1:      clamp(2.5rem, 1.8rem + 3vw, 4.5rem);   /* 40 → 72 */
  --t-h2:      clamp(2rem, 1.5rem + 2vw, 3.25rem);    /* 32 → 52 */
  --t-h3:      clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); /* 22 → 28 */
  --t-h4:      1.1875rem;                              /* 19 */
  --t-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);/* 17 → 20 */
  --t-body:    1rem;                                   /* 16 */
  --t-small:   0.875rem;                               /* 14 */
  --t-label:   0.75rem;                                /* 12 */

  --lh-body: 1.6;
  --lh-tight: 1.2;

  /* --- Spacing (8px scale) ---------------------------------------------- */
  --s-1: 0.25rem;  /* 4  */
  --s-2: 0.5rem;   /* 8  */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.5rem;   /* 24 */
  --s-6: 2rem;     /* 32 */
  --s-7: 2.5rem;   /* 40 */
  --s-8: 3rem;     /* 48 */
  --s-9: 4rem;     /* 64 */
  --s-10: 5rem;    /* 80 */
  --s-11: 6rem;    /* 96 */
  --s-12: 8rem;    /* 128 */

  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --section-y-tight: clamp(3rem, 2rem + 3vw, 5rem);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1536px;   /* always 1536 (Prakash, 3 Nov) */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --header-h: 76px;
  --utility-h: 36px;

  /* --- Shape ------------------------------------------------------------ */
  --radius: 0px;          /* hard edges throughout: industrial, not app-like */
  --radius-sm: 2px;
  --hairline: 1px;
  --rule-dark: rgba(255, 255, 255, 0.16);
  --rule-light: rgba(0, 0, 0, 0.12);

  /* --- Stripe device (Brand Black Box) -----------------------------------
     Two translucent yellow stripes, right-anchored, full height, 6:2:6,
     bar = 5% of surface width, 30% opacity. Dark/photo surfaces only.      */
  --stripe-bar: 5%;
  --stripe-gap: calc(var(--stripe-bar) / 3);
  --stripe-opacity: 0.3;
  --stripe-inset: 6%;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 600ms;

  /* --- Elevation (used sparingly, light surfaces only) ------------------ */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.06), 0 8px 24px -12px rgba(0,0,0,0.18);
}