/* ============================================================
   ReelNotes — VENDORED design tokens (marketing site, v1)

   Single source of truth = the APP repo's docs/brand-palette.md (which is
   itself generated from the app's static/styles.css). This file is a VENDORED
   COPY of the values the site needs — do not treat it as authoritative. When
   brand-palette.md changes, reconcile this file to it.

   Scope: DARK theme only for v1 (build-doc §3 — dark-first, "the primary brand
   environment"). The light "Soft Grey" theme can be added later as an
   html[data-theme="light"] block; nothing here assumes dark-only structurally.

   The ONE deliberate divergence from the app's :root: MOTION timings use the
   SITE values 150/200/250/300 (brand-foundation §12 / build-doc §0.3), not the
   app's in-product 140/220. Different surface, intentional.
   ============================================================ */
:root{
  color-scheme: dark;

  /* ── Brand core (brand-palette §1) ─────────────────────────────────────── */
  --brand-blue: #0698EA;      /* identity: wordmark + play triangle. THEME-CONSTANT. */
  --accent-blue: #0698EA;     /* action / CTA / link */
  --brand-blue-hover: #0588D2;
  --accent-blue-soft: rgba(6, 152, 234, 0.4);
  --accent-blue-bg: rgba(6, 152, 234, 0.2);
  --callout-accent: #2196F3;  /* synthesis/Card callout ACCENT ONLY */
  --callout-bg: rgba(33, 150, 243, 0.06);

  /* ── Background & surfaces (brand-palette §2, dark "Deep Navy") ─────────── */
  --bg: #0A1628;
  --surface-chrome: #0D1926;
  --surface-2: rgba(255,255,255,0.03);   /* base card (rest) */
  --surface:   rgba(255,255,255,0.05);   /* lifted / hover */
  --control-bg: rgba(255,255,255,0.08);
  --border:   rgba(255,255,255,0.06);
  --border-2: rgba(255,255,255,0.12);
  --btn: rgba(255,255,255,0.08);
  --btn-hover: rgba(255,255,255,0.12);

  /* ── Text ramp (brand-palette §3, dark) ────────────────────────────────── */
  --text: #E8EEF5;
  --text-body: #C4CFDC;
  --text-preview: #A8B5C7;
  --text-meta: #6B7D92;
  --text-disabled: #3A4A5F;
  --muted: var(--text-meta);

  /* ── Semantic accents (brand-palette §4, dark) ─────────────────────────── */
  --accent-green: #16A34A;
  --accent-green-strong: #15803D;
  --accent-orange: #F59E0B;
  --accent-orange-strong: #D97706;
  --accent-red: #EF4444;

  /* ── Tier accents (brand-palette §6, dark) — PRICING CARDS ONLY ─────────── */
  --tier-curator: #A78BFA;    /* purple */
  --tier-analyst: #F472B6;    /* pink   */
  --tier-navigator: #4F46E5;  /* indigo */

  /* First-run visitors always become Curators, and the app even fixes its ambient
     gradient to Curator purple for everyone — so Curator is the site's secondary /
     EDGE accent (edge-accent stripes, small control glyphs). Brand blue stays
     identity/CTA/links; pillar colours stay for real categories. */
  --tier-accent: var(--tier-curator);
  --stripe-rest: var(--border-2);   /* muted edge stripe at rest → --tier-accent on hover */

  /* ── 20-pillar interest palette (brand-palette §7, dark) ────────────────── */
  /* Use ONLY where a real category renders (pillar pills, the interest-map
     screenshot, showcase Cards). Do not invent section hues from these. */
  --pillar-ai: #5CE6FF;
  --pillar-business: #8893F2;
  --pillar-marketing: #F59E0B;
  --pillar-finance: #4ADE80;
  --pillar-technology: #4D8FE8;
  --pillar-productivity: #5EEAD4;
  --pillar-psychology: #B79CFF;
  --pillar-education: #64B5F6;
  --pillar-careers: #D88FD8;
  --pillar-health-fitness: #34D399;
  --pillar-food-drink: #FBBF24;
  --pillar-travel: #56C7F5;
  --pillar-music: #E879C6;
  --pillar-creative-design: #FB8FB0;
  --pillar-entertainment: #FB7185;
  --pillar-sports: #B4E157;
  --pillar-home-diy: #D6A06A;
  --pillar-science: #C77BE8;
  --pillar-news-society: #B388E8;
  --pillar-personal-development: #F2C94C;

  /* ── Search-dimension glyph colours (brand-palette §10) ─────────────────── */
  --search-transcript: #F2C94C;  /* gold */
  --search-caption: #64B5F6;     /* blue */
  --search-channel: #FB7185;     /* coral */
  --search-tag: #4ADE80;         /* green */
  --search-mentions: #5EEAD4;    /* teal (= --tag-teal) — "who's in it" */
  /* NB: Audio Gold (#F2C94C family) is reserved for audio Editions — do NOT use
     it as a site accent (it signals an unbuilt feature). It appears above only as
     the fixed transcript-glyph colour, which is its sanctioned use. */

  /* ── Type scale (mirrors app :root; headings use Inter Bold per §0.1) ────── */
  --type-display-size: clamp(2rem, 4.8vw, 3.9rem);
  --type-display-line: 1.04;
  --type-display-track: -0.028em;
  --type-heading-size: clamp(1.05rem, 1.3vw, 1.2rem);
  --type-heading-line: 1.12;
  --type-heading-track: -0.01em;
  --type-body-size: 1rem;        /* site body is a touch larger than the app's dense 0.8125rem */
  --type-meta-size: 0.6875rem;
  --type-meta-track: 0.08em;
  --type-label-size: 0.625rem;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --content-max-width: 1080px;
  --layout-inset-desktop: 24px;
  --layout-inset-mobile: 20px;

  /* ── Spacing (app scale) ───────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 40px;
  --space-9: 64px;
  --space-10: 96px;

  /* ── Motion — SITE values (brand-foundation §12), the one divergence ─────── */
  --motion-hover: 150ms;
  --motion-action: 200ms;
  --motion-modal: 250ms;
  --motion-transition: 300ms;

  /* ── Elevation (brand-palette / app, dark) ─────────────────────────────── */
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.40);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.45);

  --radius-card: 14px;
  --radius-pill: 999px;
}