/* ============================================================
   CHOICE OMG: Colors & Type Foundations
   "Digital marketing run like infrastructure."
   Edmonton-based digital marketing agency. Tech-command-center,
   sophisticated dark-mode aesthetic.

   Imported from the Choice OMG Design System (claude.ai/design).
   The only local change vs. source: font declarations live in
   fonts.css, rewired to the repo's web-optimized woff2 fonts
   (Funnel Display is a variable font, 300-800; Poppins ships
   400/500/600/700 - heavier weights synthesize from 700). Source
   used brand TTFs in fonts/.
   ============================================================ */

/* ---------- FONTS ---------- */
/* Primary: Funnel Display (headings, display, logo-adjacent)
   Secondary: Poppins (body, UI, labels) */

/* Funnel Display - variable font, weights 300 (Light) -> 800 (ExtraBold) */
:root {
  /* ===== CORE BRAND PALETTE (from brandbook) ===== */
  --obsidian-black: #0B1121;   /* primary dark surface / "sophisticated dark-mode" */
  --pure-white:     #FFFFFF;
  --royal-blue:     #2563EB;   /* primary action / brand blue */
  --raspberry-pink: #EC4899;   /* accent / energy / secondary brand */

  /* ===== EXTENDED PALETTE ===== */
  /* Logo-gradient stops (lighter blue->pink used in the wordmark & doc headings) */
  --logo-blue:   #5E97FF;      /* document H1/H2 color, lighter blue logo stop */
  --logo-pink:   #FF6FFF;      /* "team guidance" accent, lighter pink logo stop */
  --logo-violet: #7B6CF0;      /* mid blend of the gradient */

  /* Navy surface ramp - built around obsidian for the command-center UI */
  --navy-900: #070B16;   /* deepest backdrop */
  --navy-800: #0B1121;   /* = obsidian, base canvas */
  --navy-700: #111A30;   /* raised panel */
  --navy-600: #18233F;   /* card surface */
  --navy-500: #20304F;   /* hover surface */
  --navy-400: #2C3E60;   /* border / divider strong */
  --navy-300: #3A4D72;   /* muted line */

  /* Borders & hairlines on dark */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-soft:   rgba(255, 255, 255, 0.12);
  --border-blue:   rgba(94, 151, 255, 0.35);

  /* ===== SEMANTIC - STATUS (from the monitoring dashboards) ===== */
  --status-positive: #22C55E;  /* "Mentioned" / up trend / good */
  --status-warning:  #F59E0B;  /* "Medium" / budget pacing */
  --status-negative: #EF4444;  /* "Not Found" / down */
  --status-info:     #38BDF8;  /* cyan data glow / "Cited" */

  /* ===== TEXT COLORS ===== */
  /* On dark (primary product context) */
  --fg-1: #FFFFFF;                       /* primary text on dark */
  --fg-2: rgba(255, 255, 255, 0.72);     /* secondary text */
  --fg-3: rgba(255, 255, 255, 0.50);     /* tertiary / captions */
  --fg-4: rgba(255, 255, 255, 0.34);     /* disabled / faint */
  /* On light (documents) */
  --ink-1: #0B1121;                      /* near-black headings on light */
  --ink-body: #333333;                   /* document body text */
  --ink-2: #5A6378;                      /* secondary on light */
  --rule-light: #DDDDDD;                 /* table borders on light */

  /* ===== GRADIENTS / GLOW ===== */
  --grad-brand: linear-gradient(90deg, #5E97FF 0%, #7B6CF0 50%, #EC4899 100%); /* @kind color */
  --grad-brand-blue-pink: linear-gradient(90deg, #2563EB 0%, #EC4899 100%); /* @kind color */
  --grad-surface: radial-gradient(120% 120% at 50% 0%, #16213B 0%, #0B1121 60%);
  --glow-blue: 0 0 24px rgba(56, 130, 246, 0.45);
  --glow-cyan: 0 0 18px rgba(56, 189, 248, 0.40);

  /* ===== TYPE FAMILIES ===== */
  --font-display: "Funnel Display", "Poppins", system-ui, sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, sans-serif;

  /* ===== TYPE SCALE (product / screen, dark UI) ===== */
  --text-display: 700 56px/1.04 var(--font-display);
  --text-h1:      700 40px/1.1  var(--font-display);
  --text-h2:      700 30px/1.15 var(--font-display);
  --text-h3:      700 22px/1.25 var(--font-display);
  --text-title:   600 18px/1.3  var(--font-body);
  --text-body:    400 15px/1.55 var(--font-body);
  --text-body-sm: 400 13px/1.5  var(--font-body);
  --text-label:   600 12px/1.3  var(--font-body);
  --text-caption: 400 12px/1.4  var(--font-body);
  --text-overline: 600 11px/1.2 var(--font-body); /* use with letter-spacing .14em, uppercase */

  /* tracking */
  --tracking-tight: -0.02em;
  --tracking-overline: 0.14em;

  /* ===== RADII ===== */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;   /* default card */
  --radius-lg: 20px;   /* large panel */
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ===== SPACING (4px base) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ===== ELEVATION (shadows on dark) ===== */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55);
  --shadow-4: 0 24px 60px rgba(0,0,0,0.6);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS (dark product context)
   Apply by adding class "choice-dark" to a root container.
   ============================================================ */
.choice-dark {
  background: var(--grad-surface);
  color: var(--fg-1);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
.choice-dark h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); margin: 0; }
.choice-dark h2 { font: var(--text-h2); letter-spacing: var(--tracking-tight); margin: 0; }
.choice-dark h3 { font: var(--text-h3); margin: 0; }
.choice-dark p  { font: var(--text-body); color: var(--fg-2); margin: 0; }
.choice-dark small, .choice-dark .caption { font: var(--text-caption); color: var(--fg-3); }
.choice-dark .overline {
  font: var(--text-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-3);
}
.choice-dark .display { font: var(--text-display); letter-spacing: var(--tracking-tight); }
.choice-dark a { color: var(--logo-blue); text-decoration: none; }
.choice-dark a:hover { color: #8DB4FF; }

/* Gradient text helper (brand wordmark feel) */
.choice-gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   DOCUMENT CONTEXT (light, per "Documentation Design Standards")
   Heading font Funnel Display, body Poppins 11pt #333,
   H1/H2 blue #5E97FF.
   ============================================================ */
.choice-doc {
  background: var(--pure-white);
  color: var(--ink-body);
  font: 400 15px/1.6 var(--font-body);
}
.choice-doc h1 { font: 700 30px/1.2 var(--font-display); color: var(--logo-blue); margin: 0 0 .4em; }
.choice-doc h2 { font: 700 23px/1.25 var(--font-display); color: var(--logo-blue); margin: 0 0 .4em; }
.choice-doc h3 { font: 700 19px/1.3 var(--font-display); color: var(--ink-1); margin: 0 0 .4em; }
.choice-doc .team-note {
  border-left: 3px solid var(--logo-pink);
  font-style: italic;
  padding-left: 16px;
  margin-left: 8px;
  color: var(--ink-2);
}