/* ============================================================
   THE SOURCE — Color System
   ------------------------------------------------------------
   Brand colors (from Brand Guidelines):
     Denim        #2B5B6C  PANTONE 2181  — foundation / dominant (~50%)
     Bright Yellow #FDDA25 PANTONE 115   — energy / eye-catch (~30%)
     Sage         #ADDFB3  PANTONE 2246  — growth / accent (~20%)
   Distribution intent: Denim dominant, Yellow eye-catching,
   Sage sparing. The Sage→Yellow gradient is the "premium" accent.
   ============================================================ */

:root {
    /* ---- Brand base hues (exact brand values) ---- */
    --denim: #2B5B6C;
    --bright-yellow: #FDDA25;
    --sage: #ADDFB3;
    /* ---- Denim scale ---- */
    --denim-50: #EAF1F3;
    --denim-100: #D2E0E4;
    --denim-200: #A6C2C9;
    --denim-300: #79A3AE;
    --denim-400: #4D8593;
    --denim-500: #2B5B6C; /* BASE */
    --denim-600: #244C5A;
    --denim-700: #1D3D48;
    --denim-800: #152C34;
    --denim-900: #0E1D22;
    /* ---- Bright Yellow scale ---- */
    --yellow-50: #FFFBE6;
    --yellow-100: #FEF4C2;
    --yellow-200: #FEEC93;
    --yellow-300: #FDE45C;
    --yellow-400: #FDDF3F;
    --yellow-500: #FDDA25; /* BASE */
    --yellow-600: #E9C50C;
    --yellow-700: #C2A40A;
    --yellow-800: #8F7907;
    --yellow-900: #5C4E05;
    /* ---- Sage scale ---- */
    --sage-50: #F2FAF3;
    --sage-100: #E1F3E4;
    --sage-200: #C9E9CD;
    --sage-300: #ADDFB3; /* BASE */
    --sage-400: #8FCE97;
    --sage-500: #6FBB79;
    --sage-600: #4E9D59;
    --sage-700: #3C7B45;
    --sage-800: #2C5A32;
    --sage-900: #1C3A20;
    /* ---- Neutrals (warm-leaning to sit beside denim) ---- */
    --white: #FFFFFF;
    --paper: #FBFCFC; /* default page background */
    --mist: #F4F7F8; /* subtle section background */
    --cloud: #E7EDEF; /* hairline / divider tint */
    --ash: #C3CDD1; /* disabled borders */
    --slate: #5E6E73; /* muted body text on light */
    --ink: #142128; /* near-black text (denim-tinted) */
    --black: #0B1418;
    /* ---- Gradients ---- */
    --gradient-radiance: linear-gradient(90deg, var(--sage-300) 0%, var(--yellow-500) 100%);
    --gradient-radiance-diag: linear-gradient(120deg, var(--sage-300) 0%, var(--yellow-500) 100%);
    --gradient-denim-depth: linear-gradient(160deg, var(--denim-500) 0%, var(--denim-800) 100%);
    /* Soft "atmosphere" gradients — the airy social-post backgrounds.
     Pair ONLY with denim-700 text or a white content card (never white text
     directly on the light areas). Cool = sage->denim; Warm = sage->yellow. */
    --gradient-atmos-cool: linear-gradient(135deg, var(--sage-100) 0%, var(--sage-300) 38%, var(--denim-400) 100%);
    --gradient-atmos-cool-20: linear-gradient(-20deg, var(--sage-100) 0%, var(--sage-300) 38%, var(--denim-400) 100%);
    --gradient-atmos-warm: linear-gradient(135deg, #DCEFF1 0%, var(--sage-200) 45%, var(--yellow-300) 100%);
    --gradient-atmos-balanced: linear-gradient(120deg, #D9EEF0 0%, var(--sage-300) 50%, var(--yellow-400) 100%);
    /* Radial "sun glow" overlay -- layer on top of an atmos gradient, top-right origin */
    --glow-sun: radial-gradient(circle at 82% 20%, rgba(253,218,37,0.55) 0%, rgba(253,218,37,0) 45%); /* @kind color */
    /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
    /* Surfaces */
    --surface-page: var(--paper);
    --surface-section: var(--mist);
    --surface-card: var(--white);
    --surface-inverse: var(--denim-500); /* dark sections */
    --surface-inverse-deep: var(--denim-800);
    --surface-accent: var(--sage-100); /* soft accent panel */
    --surface-highlight: var(--yellow-50); /* yellow-tinted callout */
    /* Text */
    --text-strong: var(--denim-700); /* headings on light */
    --text-body: var(--ink); /* body copy on light */
    --text-muted: var(--slate); /* secondary text */
    --text-on-dark: var(--white); /* text on denim */
    --text-on-dark-muted: var(--sage-200);
    --text-on-yellow: var(--denim-700); /* text on yellow MUST be denim */
    --text-on-sage: var(--denim-700); /* text on sage MUST be denim */
    --text-link: var(--denim-500);
    /* Borders */
    --border-subtle: var(--cloud);
    --border-default: var(--denim-200);
    --border-strong: var(--denim-500);
    --border-disabled: var(--ash);
    /* Brand role colors */
    --brand-primary: var(--denim-500);
    --brand-accent: var(--yellow-500);
    --brand-support: var(--sage-300);
    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(43, 91, 108, 0.35);
    --focus-ring-yellow: 0 0 0 3px rgba(253, 218, 37, 0.55);
    /* Status (derived to harmonize with the palette) */
    --success: #4E9D59; /* sage-600 */
    --success-bg: #E1F3E4;
    --warning: #E9C50C; /* yellow-600 */
    --warning-bg: #FEF4C2;
    --error: #C0473A;
    --error-bg: #F8E4E1;
    --info: #2B5B6C; /* denim */
    --info-bg: #D2E0E4;
}