/* ============================================================================
   IB Scout — Design Tokens · SINGLE SOURCE OF TRUTH
   ----------------------------------------------------------------------------
   Linked FIRST by every page (before css/app.css, css/theme.css, and any
   inline <style>). All colors, type, spacing, and radii live here so the brand
   is defined once and consumed via var() everywhere else.

   Brand palette is taken verbatim from the IB Brand Style Guide (© 2024
   Intelligent Buildings, LLC): IB Blue + IB Orange are the primary brand
   colors; Light Blue is the secondary; the grays + extended palette round it
   out. Do NOT hardcode these hexes elsewhere — reference the --ib-* tokens.

   The semantic UI tokens (--bg, --surface, --accent, …) map the app's dark
   "command-center" surface system onto the brand: IB Orange is the action
   accent, IB Blue is the brand chrome, Light Blue is links/info.
   ============================================================================ */

:root {
  /* ── IB brand palette (immutable brand values) ─────────────────────────── */
  --ib-blue:          #122048;  /* Primary  · RGB 18,32,72   */
  --ib-orange:        #F04B24;  /* Primary  · RGB 240,75,36  · accent / pop */
  --ib-light-blue:    #42B9EA;  /* Secondary· RGB 66,185,234 · links, subheads */
  --ib-light-black:   #404040;
  --ib-light-gray:    #BFBFBF;
  --ib-lighter-gray:  #D9D9D9;
  --ib-lightest-gray: #F2F2F2;
  --ib-gray:          #A6A6A6;
  --ib-dark-gray:     #7F7F7F;
  /* Extended palette */
  --ib-green:  #538135;
  --ib-purple: #862069;
  --ib-pink:   #F8196C;
  --ib-yellow: #FFC000;
  --ib-red:    #C00000;
  /* Derived brand tints (for chrome states — kept here so they stay in sync) */
  --ib-blue-900:   #0b1430;  /* deepest navy  */
  --ib-blue-700:   #0e1a3c;  /* header surface */
  --ib-blue-400:   #2a3d6e;  /* navy border / hover */
  --ib-orange-600: #d33d18;  /* orange hover / pressed */
  --ib-orange-300: #f7795a;  /* orange light/hover-on-dark */

  /* ── Semantic UI tokens — DARK (default) ───────────────────────────────── */
  --bg:        #0a0a0b;
  --surface:   #111114;
  --surface2:  #18181d;
  --border:    #222228;
  --border2:   #2e2e38;
  --rp-research-link-hover: #1e1e26;   /* research-link hover bg (legacy dark hex) */
  --text:      #e8e8f0;
  --text1:     #e8e8f0;   /* alias of --text — some components reference --text1 */
  --text2:     #8888a0;
  --text3:     #55556a;
  --accent:      var(--ib-orange);
  --accent2:     var(--ib-orange-600);
  --accent-dim:  rgba(240, 75, 36, 0.10);
  --accent-dim2: rgba(240, 75, 36, 0.18);
  --link:         var(--ib-light-blue);
  --brand:        var(--ib-blue);
  --brand-surface:var(--ib-blue-700);
  --brand-border: var(--ib-blue-400);
  --brand-ink:    #ffffff;
  --red:    #f87171;
  --amber:  #fbbf24;
  --green:  #22c55e;
  --blue:   #60a5fa;
  --purple: #a78bfa;
  /* Rank-breakdown categorical palette (cockpit score bar). A validated
     CVD-safe set (dataviz skill, dark steps) — one fixed hue per score family;
     identity is always backed by a labelled legend, never colour alone. */
  --score-buildingtech: #3987e5;
  --score-portfolio:    #199e70;
  --score-bd:           #d95926;
  --score-signal:       #c98500;
  --score-code:         #e66767;
  --score-readiness:    #9085e9;
  --font-main: 'Epilogue', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* ── Scout report palette (--rp-*) — used by the in-app Scout overlay AND
     scout-report.html so the report respects light/dark. DARK values equal the
     overlay's original hardcoded colours, so dark mode is unchanged. ─────── */
  --rp-card-bg:#0f1117; --rp-card-bg-2:#0f172a; --rp-chip-bg:#1a2236;
  --rp-row-bg:#0a0a14; --rp-row-bg-2:#0a0a1f; --rp-input-bg:#0f1117;
  --rp-track-bg:#1e293b; --rp-border:#1e2433; --rp-divider:#334155;
  --rp-text-strong:#f1f5f9; --rp-text:#cbd5e1; --rp-text-2:#e2e8f0;
  --rp-text-muted:#94a3b8; --rp-text-faint:#64748b; --rp-label:#475569; --rp-dim:#334155;
  --rp-success-bg:#052e16; --rp-success-bg-2:#051207; --rp-success-border:#166534; --rp-success-border-2:#14532d;
  --rp-warn-bg:#422006; --rp-warn-border:#d97706; --rp-danger-bg:#1a0a0a;
  --rp-info-bg:#0c2a3d; --rp-info-border:#164e63; --rp-info-text:#7dd3fc;
  --rp-purple-bg:#1e1a3a; --rp-purple-border:#3730a3; --rp-purple-bg-deep:#1e1b4b;
  --rp-link:#818cf8; --rp-news-link:#93c5fd; --rp-teal-bg:#0c2a2a; --rp-teal:#2dd4bf;
  --rp-hubspot-bg:#2d1a13; --rp-hubspot-border:#7c3d2a; --rp-hubspot-text:#ff7a59;
  /* Soft-pill text accents — bright on dark. (Light overrides below darken
     them so they keep AA contrast on the pale --rp-*-bg pill fills.) */
  --rp-success-text:#4ade80; --rp-warn-text:#fbbf24; --rp-verify-text:#fb923c; --rp-danger-text:#f87171;
  --rp-verify-bg:#431407; --rp-verify-border:#ea580c; --rp-disq-bg:#18181b; --rp-disq-border:#52525b;
}

body.light-mode {
  --bg:        #f2f3f5;   /* ≈ IB Lightest Gray #F2F2F2 */
  --surface:   #ffffff;   /* IB White */
  --surface2:  #eaecf0;
  --border:    #dde1e7;
  --border2:   #c8cdd6;
  --rp-research-link-hover: #e1e4ea;   /* a touch darker than --surface2 in light mode */
  --text:      #0d0e12;
  --text1:     #0d0e12;   /* alias of --text — some components reference --text1 */
  --text2:     #4a5260;
  --text3:     #8891a4;
  --accent:      var(--ib-orange);
  --accent2:     var(--ib-orange-600);
  --accent-dim:  rgba(240, 75, 36, 0.10);
  --accent-dim2: rgba(240, 75, 36, 0.16);
  --link:         #1f86b8;          /* darkened Light Blue for AA on white */
  --brand:        var(--ib-blue);
  --brand-surface:var(--ib-blue);
  --brand-border: var(--ib-blue-400);
  --brand-ink:    #ffffff;
  --red:    #dc2626;
  --amber:  #b45309;
  --green:  #16a34a;
  --blue:   #1d4ed8;
  --purple: #6d28d9;
  /* Rank-breakdown categorical palette — light steps of the same validated set. */
  --score-buildingtech: #2a78d6;
  --score-portfolio:    #1baf7a;
  --score-bd:           #eb6834;
  --score-signal:       #eda100;
  --score-code:         #e34948;
  --score-readiness:    #4a3aa7;

  /* Scout report palette — light values (mirror scout-report.html). */
  --rp-card-bg:#ffffff; --rp-card-bg-2:#f8fafc; --rp-chip-bg:#f1f5f9;
  --rp-row-bg:#f3f4f6; --rp-row-bg-2:#eef2ff; --rp-input-bg:#ffffff;
  --rp-track-bg:#e2e8f0; --rp-border:#dde1e7; --rp-divider:#cbd5e1;
  --rp-text-strong:#0d0e12; --rp-text:#1e293b; --rp-text-2:#0d0e12;
  --rp-text-muted:#475569; --rp-text-faint:#64748b; --rp-label:#64748b; --rp-dim:#94a3b8;
  --rp-success-bg:#ecfdf5; --rp-success-bg-2:#f0fdf4; --rp-success-border:#16a34a; --rp-success-border-2:#86efac;
  --rp-warn-bg:#fef3c7; --rp-warn-border:#b45309; --rp-danger-bg:#fef2f2;
  --rp-info-bg:#e0f2fe; --rp-info-border:#7dd3fc; --rp-info-text:#0369a1;
  --rp-purple-bg:#ede9fe; --rp-purple-border:#a78bfa; --rp-purple-bg-deep:#ddd6fe;
  --rp-link:#4f46e5; --rp-news-link:#1d4ed8; --rp-teal-bg:#ccfbf1; --rp-teal:#0f766e;
  --rp-hubspot-bg:#ffedd5; --rp-hubspot-border:#fdba74; --rp-hubspot-text:#c2410c;
  /* Darkened pill-text accents for AA contrast on pale light pill fills. */
  --rp-success-text:#15803d; --rp-warn-text:#b45309; --rp-verify-text:#c2410c; --rp-danger-text:#b91c1c;
  --rp-verify-bg:#ffedd5; --rp-verify-border:#fdba74; --rp-disq-bg:#f1f5f9; --rp-disq-border:#cbd5e1;
}

/* Theme switch should be instant. Toggling body.light-mode changes the colour
   tokens, which would otherwise animate on every element carrying a
   `transition: all` (buttons, pills, tabs, chips…) — across a large DOM that
   reads as a slow, janky fade. While switching, the handler adds
   body.theme-switching to suppress all transitions, then removes it on the
   next frame so normal hover/focus transitions resume. */
body.theme-switching,
body.theme-switching * {
  transition: none !important;
}