/* ==========================================================================
   Recon BI — Design Tokens
   Single source of truth for brand, surface, text, semantic, and structural
   values across customer_portal.html, deep_report.html, improvement_guide.html.
   Reference: ~/.claude/plans/sprint-recon-ui-unification-2026-04-16.md
   ========================================================================== */

:root {
  /* Force light mode across all three surfaces — dark-mode handling is
     inconsistent (portal uses hardcoded #fff cards, report/guide use
     var(--bg-card)) so we standardize on the editorial cream palette
     until a proper dark-mode audit ships post-launch. */
  color-scheme: light;

  /* ───────────────────────────────────────────────
     BRAND — Editorial navy + gold + warm cream.
     Deliberately non-SaaS-default (no indigo gradients).
     Reads: Economist / FT / Monocle, not Stripe / Linear.
     ─────────────────────────────────────────────── */
  --brand-navy:            #1E3A5F;
  --brand-navy-hover:      #162B47;
  --brand-navy-light:      #2A4F7C;
  --brand-navy-subtle:     #EDF1F6;
  --brand-navy-muted:      #D6DEEA;

  --brand-gold:            #C9A84C;
  --brand-gold-hover:      #B59536;
  --brand-gold-light:      #E8C76A;
  --brand-gold-subtle:     #FBF6E7;

  --brand-cream:           #F8F7F4;
  --brand-cream-2:         #EEEAE1;
  --brand-cream-3:         #E4DED1;

  --brand-ink:             #1A1A1A;     /* near-black for body text on cream */
  --brand-slate:           #4A4A4A;

  /* ───────────────────────────────────────────────
     SURFACE — page, cards, emphasis
     ─────────────────────────────────────────────── */
  --bg-page:               var(--brand-cream);
  --bg-card:               #FFFFFF;
  --bg-alt:                var(--brand-cream-2);
  --bg-emphasis:           var(--brand-navy);      /* navy hero / CTA section */
  --bg-dark:               var(--brand-navy);
  --bg-metric:             var(--brand-navy-subtle);
  --bg-section-alt:        var(--brand-cream-2);
  --bg-primary:            var(--brand-cream);

  /* ───────────────────────────────────────────────
     TEXT — warm dark on cream
     ─────────────────────────────────────────────── */
  --text-primary:          var(--brand-ink);
  --text-secondary:        #3D3D3D;
  --text-muted:            #595959;
  --text-faint:            #6F6F6F;
  --text-tertiary:         var(--text-muted);
  --text-on-dark:          #F5F2EA;                /* cream-tinted white on navy */
  --text-on-accent:        #FFFFFF;

  /* ───────────────────────────────────────────────
     BORDER — warm neutrals to match cream
     ─────────────────────────────────────────────── */
  --border-subtle:         #E4DED1;
  --border-default:        #D4CFC5;
  --border-strong:         #B5AE9E;
  --border-active:         var(--brand-navy);

  /* ───────────────────────────────────────────────
     SEMANTIC — grade A-F + status
     OKLCH grade colors retained — proven visual hierarchy
     for data-viz. Tuned to read well on cream + white.
     ─────────────────────────────────────────────── */
  --color-grade-a:         #2E9F5C;                /* slightly muted green — less neon on cream */
  --color-grade-b:         #3B82F6;
  --color-grade-c:         #D9941E;                /* warmer amber — harmonizes with gold */
  --color-grade-d:         #E57321;
  --color-grade-f:         #D93A3A;

  --color-success:         #2E9F5C;
  --color-warning:         #D9941E;
  --color-error:           #D93A3A;
  --color-info:            var(--brand-navy-light);

  /* Legacy alias layer — keeps existing style.css + portal CSS working
     without renaming. New code should prefer --brand-* + --color-*. */
  --color-primary:         var(--brand-navy);
  --color-primary-hover:   var(--brand-navy-hover);
  --color-primary-subtle:  var(--brand-navy-subtle);
  --color-primary-muted:   var(--brand-navy-muted);

  /* Portal legacy aliases (24 vars in customer_portal.html inline <style>) */
  --navy:                  var(--brand-navy);
  --navy-light:            var(--brand-navy-light);
  --gold:                  var(--brand-gold);
  --gold-light:            var(--brand-gold-light);
  --surface:               var(--bg-page);
  --surface-2:             var(--bg-alt);
  --surface-secondary:     var(--bg-alt);
  --white:                 var(--bg-card);
  --text:                  var(--text-primary);
  --border:                var(--border-default);
  --green:                 var(--color-success);
  --amber:                 var(--color-warning);
  --red:                   var(--color-error);
  --blue:                  var(--brand-navy-light);

  /* ───────────────────────────────────────────────
     SPACING — 4/8/12/16/24/32/48/64/96 scale
     ─────────────────────────────────────────────── */
  --space-2xs:             0.25rem;                /* 4px */
  --space-xs:              0.5rem;                 /* 8px */
  --space-sm:              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 */

  /* ───────────────────────────────────────────────
     RADIUS
     ─────────────────────────────────────────────── */
  --radius-sm:             6px;
  --radius-md:             10px;
  --radius:                12px;                   /* portal default */
  --radius-lg:             16px;
  --radius-full:           9999px;

  /* ───────────────────────────────────────────────
     TYPOGRAPHY — Instrument Sans everywhere.
     Sizes use fluid clamp() for responsive scaling.
     ─────────────────────────────────────────────── */
  --font-sans:             'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:             'JetBrains Mono', 'Courier New', ui-monospace, monospace;
  --font-family:           var(--font-sans);

  --font-size-xs:          clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --font-size-sm:          clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --font-size-base:        clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --font-size-lg:          clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --font-size-xl:          clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --font-size-2xl:         clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --font-size-3xl:         clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);
  --font-size-metric:      clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
  --font-size-grade:       var(--font-size-metric);

  /* Short aliases — some templates use --text-* naming */
  --text-xs:               var(--font-size-xs);
  --text-sm:               var(--font-size-sm);
  --text-base:             var(--font-size-base);
  --text-lg:               var(--font-size-lg);
  --text-xl:               var(--font-size-xl);
  --text-2xl:              var(--font-size-2xl);
  --text-3xl:              var(--font-size-3xl);
  --text-metric:           var(--font-size-metric);

  /* ───────────────────────────────────────────────
     SHADOWS — warm-tinted, subtle
     ─────────────────────────────────────────────── */
  --shadow-sm:             0 1px 2px rgba(30, 58, 95, 0.06);
  --shadow-md:             0 2px 8px rgba(30, 58, 95, 0.08);
  --shadow-lg:             0 8px 24px rgba(30, 58, 95, 0.10);
  --shadow-xl:             0 16px 48px rgba(30, 58, 95, 0.12);
  --shadow-gold:           0 4px 14px rgba(201, 168, 76, 0.25);

  /* ───────────────────────────────────────────────
     MOTION
     ─────────────────────────────────────────────── */
  --transition-fast:       0.15s ease;
  --transition-normal:     0.25s ease;
  --transition-slow:       0.4s ease;

  /* ───────────────────────────────────────────────
     LAYOUT
     ─────────────────────────────────────────────── */
  --container-max:         1200px;
  --container-narrow:      840px;
  --container-wide:        1400px;
  --max-width:             var(--container-max);
  --nav-height:            64px;

  /* ───────────────────────────────────────────────
     MARKETING-SITE ALIASES
     Added 2026-04-18 for sprint-recon-design-consistency.
     Give site/ pages the same token names referenced in the sprint brief
     while preserving existing templates/*.html consumers above.
     ─────────────────────────────────────────────── */
  --color-navy:            var(--brand-navy);
  --color-navy-hover:      var(--brand-navy-hover);
  --color-gold:            var(--brand-gold);
  --color-gold-hover:      var(--brand-gold-hover);
  --color-cream:           var(--brand-cream);
  --color-cream-2:         var(--brand-cream-2);

  /* Flat spacing aliases for marketing pages */
  --spacing-xs:            var(--space-xs);
  --spacing-sm:            var(--space-md);
  --spacing-md:            var(--space-lg);
  --spacing-lg:            var(--space-xl);
  --spacing-xl:            var(--space-2xl);
  --spacing-section:       var(--space-4xl);

  /* Card + elevated shadow aliases (flatter, less blue-tinted) */
  --shadow-card:           0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-elevated:       0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ===========================================================================
   DARK MODE — DISABLED for launch. Portal uses hardcoded white cards that
   don't participate in token swaps; report/guide do. Until that is
   reconciled, force light mode (see `color-scheme: light` on :root above).
   Block kept as no-op for reference; wrapped in (not all) so overrides never
   apply regardless of system setting.
   =========================================================================== */
@media (not all) and (prefers-color-scheme: dark) {
  :root {
    --bg-page:             #0F1419;
    --bg-card:             #1A2030;
    --bg-alt:              #141925;
    --bg-metric:            #1F2A3D;
    --bg-section-alt:      #141925;
    --bg-primary:          #0F1419;

    --text-primary:        #F5F2EA;
    --text-secondary:      #CEC8B9;
    --text-muted:          #9A9689;
    --text-faint:          #7A7569;
    --text-on-dark:        #F5F2EA;

    --border-subtle:       #2A3142;
    --border-default:      #374056;
    --border-strong:       #4A5674;

    /* Slightly brighter brand accents for dark backgrounds.
       --brand-navy is remapped to a LIGHTER shade so navy-colored
       H1s/links remain readable on the dark page bg. */
    --brand-navy:          #8FA8C9;
    --brand-navy-hover:    #A8BCD7;
    --brand-navy-light:    #B3C4DC;
    --brand-navy-subtle:   #1F2A3D;
    --brand-navy-muted:    #2A3955;
    --brand-gold:          #E8C76A;
    --brand-gold-subtle:   #2D2613;

    /* Semantic aliases — also remap color-primary so report internals
       (nav links, H3 headers, confidence chips) stay legible. */
    --color-primary:       var(--brand-navy);
    --color-primary-hover: var(--brand-navy-hover);

    /* Refresh legacy aliases after override */
    --surface:             var(--bg-page);
    --surface-2:           var(--bg-alt);
    --white:               var(--bg-card);
    --text:                var(--text-primary);
    --border:              var(--border-default);
    --color-primary-subtle: var(--brand-navy-subtle);
    --color-primary-muted: var(--brand-navy-muted);
  }
}