/* ══════════════════════════════════════════════════════════════════════════════
   PXInsights — Design Tokens (tokens.css)
   ══════════════════════════════════════════════════════════════════════════════
   Canonical CSS custom properties for every page.
   All values derive from BRAND.md and are mirrored in theme.js for Chart.js use.

   Structure:
     §1  Brand colors        ← portability seam — swap only this block to rebrand
     §2  Neutral palette     ← mirrors theme.js NEUTRAL_COLORS (canonical values)
     §3  Semantic colors     ← mirrors theme.js success/warning/error/info
     §4  Alert palette       ← mirrors theme.js ALERT_COLORS
     §5  Text shades
     §6  Surfaces & borders
     §7  Spacing
     §8  Border radius

   NOTE: Chart palettes (CAT_COLORS, SEGMENT_COLORS, TRITO_COLORS, etc.) live
   exclusively in /theme.js — Chart.js requires JS values. theme.js reads brand
   hexes from these CSS vars at load time via getComputedStyle to keep a single
   canonical origin. Do NOT duplicate chart palette values here.

   Do NOT add page-specific values here (kpi-grid column counts, hero padding, etc.).
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── §1 Brand colors (portability seam) ──────────────────────────────────── */
  /* To rebrand for another project: change only this block. All components
     below will inherit the new brand automatically via var() references.       */
  --brand-primary:      #FF4A00;  /* Tangerine — main brand color              */
  --brand-accent:       #F38454;  /* Salmon — secondary brand                  */
  --brand-text:         #201B13;  /* Espresso — primary text                   */

  /* ── §2 Neutral palette (mirrors theme.js NEUTRAL_COLORS) ────────────────── */
  /* IMPORTANT: These are the canonical values. Exit pages previously used
     drifted hex values — those have been reconciled here.                      */
  --slate:       #55524E;  /* Charcoal      — primary neutral / muted text     */
  --navy:        #3E4A5C;  /* Navy          — secondary neutral                */
  --taupe:       #8C8178;  /* Taupe         — tertiary neutral                 */
  --warm-grey:   #A8A29C;  /* Warm grey     — quaternary / muted fill          */
  --mist:        #D3C5BF;  /* Hazelnut/Mist — lightest fill / gridlines        */

  /* ── §3 Semantic colors (mirrors theme.js) ───────────────────────────────── */
  --success:     #587322;  /* Olive                                             */
  --success-bg:  #EDF5DC;
  --warning:     #FFBB00;  /* Sunflower                                         */
  --warning-bg:  #FFF8E5;  /* Custard                                           */
  --error:       #8C152F;  /* Redwood                                           */
  --error-bg:    #FAD4DD;
  --info:        #547099;  /* Denim                                             */
  --info-bg:     #DCE6F5;  /* Alice                                             */

  /* ── §4 Alert palette (mirrors theme.js ALERT_COLORS) ───────────────────── */
  /* Reserved for true alerts only. Never use for general sentiment scores.    */
  --alert-churn:   #8C152F;  /* Regrettable churn (Redwood)                    */
  --alert-urgent:  #FF4A00;  /* Urgent flight risk (Tangerine)                 */

  /* ── §5 Text shades ──────────────────────────────────────────────────────── */
  --text-primary:    #201B13;  /* Espresso — body / headings                   */
  --text-secondary:  #4E403B;  /* Cocoa — secondary body                       */
  --text-muted:      #55524E;  /* Charcoal — labels, captions                  */
  --text-subtle:     #75665F;  /* Mocha — de-emphasized text                   */

  /* ── §6 Surfaces & borders ───────────────────────────────────────────────── */
  --bg:             #FFFFFF;   /* Snow — page background                        */
  --surface:        #F0F7EF;   /* Bone — elevated surface (exec summary tint)  */
  --surface-alt:    #FAF8F6;   /* Off-white — alternate surface                */
  --sand:           #E9E5D6;   /* Sand                                          */
  --border:         #D3C5BF;   /* Hazelnut — standard border                   */
  --border-mid:     #E8E0DB;   /* Mid-weight border                             */
  --border-subtle:  #F0EBE8;   /* Very light border / row divider               */

  /* ── §7 Spacing ──────────────────────────────────────────────────────────── */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-2xl:   48px;

  /* ── §8 Border radius ────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   16px;
}