/* ============================================================
   REP1 — Brand tokens (single source of truth)
   Anchored to rep1exposure.net. Tiered: primitive → semantic →
   component. Loaded BEFORE style.css / learn-style.css, whose
   :root blocks alias into these.
   Contrast ratios (WCAG 2.2 AA) are pinned in comments — do not
   "simplify" a color without rechecking the pair.
   ============================================================ */

:root {
  /* ── Tier 1: primitives ─────────────────────────────────── */
  --rep1-ink-950: #0c0d10;   /* page ground (net ink) */
  --rep1-ink-900: #15171c;   /* raised surface / cards */
  --rep1-ink-850: #1a1c22;   /* raised-2 / wells */
  --rep1-ink-800: #1e2127;   /* hover surface */
  --rep1-ink-700: #2a2d35;   /* hairlines — hue-neutral, no navy cast */
  --rep1-ink-600: #383b42;   /* emphasized rules */

  --rep1-white:   #ffffff;
  --rep1-paper:   #f8f8f8;   /* light alternate section */
  --rep1-cream:   #f6efe3;   /* warm cream alternate section */

  --rep1-text:     #f0efed;  /* 16.9:1 on ink-950 */
  --rep1-gray-400: #a6a9b0;  /* secondary on dark — 7.5:1 */
  --rep1-gray-500: #8b8e96;  /* faint FLOOR on dark — 5.2:1; never darker */

  --rep1-red-400: #ff5a5a;   /* body-size red text on dark — 6.35:1 */
  --rep1-red-500: #e83030;   /* display/large text + non-text ONLY — 4.53:1 on ink (zero margin) */
  --rep1-red-600: #c8241f;   /* CTA fill; white label passes at any size — 5.7:1 */
  --rep1-red-700: #a30000;   /* body-size red text on light — 7.2:1 cream; never text on dark (2.4:1) */

  --rep1-green-500: #4ade80; /* success text on dark */
  --rep1-amber-500: #fbbf24; /* warning text on dark — status only, never chrome */
  --rep1-metal-gold:   #c9a86a; /* badge-tier metal fills ONLY */
  --rep1-metal-silver: #b8bcc4;
  --rep1-metal-platinum: #dfe3ea;

  --rep1-font-display: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Anton', 'Arial Black', sans-serif;
  --rep1-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rep1-display-tracking: -0.02em;
  --rep1-display-leading: 0.98;

  --rep1-radius-card: 12px;
  --rep1-radius-control: 8px;
  --rep1-radius-pill: 999px;

  /* ── Tier 2: semantic (dark default) ────────────────────── */
  --bg-page: var(--rep1-ink-950);
  --bg-surface: var(--rep1-ink-900);
  --bg-surface-2: var(--rep1-ink-850);
  --bg-surface-hover: var(--rep1-ink-800);
  --bg-well: var(--rep1-ink-850);

  --text-primary: var(--rep1-text);
  --text-secondary: var(--rep1-gray-400);
  --text-faint: var(--rep1-gray-500);
  --text-accent: var(--rep1-red-400);       /* body-size red */
  --accent-display: var(--rep1-red-500);    /* large text + non-text accents */
  --accent-soft: rgba(232, 48, 48, 0.10);   /* selected-state wash */

  --border-primary: var(--rep1-ink-700);
  --border-strong: var(--rep1-ink-600);
  --border-focus: var(--rep1-red-400);

  --status-ok: var(--rep1-green-500);
  --status-warn: var(--rep1-amber-500);
  --status-err: var(--rep1-red-400);

  /* ── Tier 3: component ──────────────────────────────────── */
  --btn-primary-bg: var(--rep1-red-600);
  --btn-primary-bg-hover: var(--rep1-red-700);
  --btn-primary-text: var(--rep1-white);
  --btn-secondary-border: var(--rep1-ink-600);
  --input-bg: var(--rep1-ink-900);
  --input-border: var(--rep1-ink-700);
  --focus-ring-color: var(--border-focus);
}

/* ── Light/cream alternate sections (editorial rhythm) ────── */
.on-light, [data-surface='light'] {
  --bg-page: var(--rep1-paper);
  --bg-surface: var(--rep1-white);
  --bg-surface-2: #f1f1f0;
  --bg-surface-hover: #ececea;
  --bg-well: #efefee;
  --text-primary: var(--rep1-ink-950);
  --text-secondary: #4a4d55;
  --text-faint: #6b6d72;               /* floor on light — 4.9:1 */
  --text-accent: var(--rep1-red-700);
  --accent-display: var(--rep1-red-700);
  --border-primary: #e4e2de;
  --border-strong: #cfccc6;
  --border-focus: var(--rep1-ink-950);
  --input-bg: var(--rep1-white);
  --input-border: #cfccc6;
}
.on-cream, [data-surface='cream'] {
  --bg-page: var(--rep1-cream);
  --bg-surface: #fdf8ef;
  --bg-surface-2: #f0e9db;
  --bg-surface-hover: #ede5d5;
  --bg-well: #efe8d9;
  --text-primary: var(--rep1-ink-950);
  --text-secondary: #5c5a54;           /* 6.1:1 on cream */
  --text-faint: #6b6860;
  --text-accent: var(--rep1-red-700);
  --accent-display: var(--rep1-red-700);
  --border-primary: #e3dccb;
  --border-strong: #cec6b2;
  --border-focus: var(--rep1-ink-950);
  --input-bg: var(--rep1-white);
  --input-border: #cec6b2;
}

/* hidden attribute must beat any display rule */
[hidden] { display: none !important; }

/* ── Global focus visibility (replaces every outline:none) ── */
:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* ── Inline icon system (icons.js) ────────────────────────── */
.ricon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.ricon-sm { width: 12px; height: 12px; }
.ricon-md { width: 16px; height: 16px; }
.ricon-lg { width: 40px; height: 40px; stroke-width: 1.75; }
.ricon-badge { width: 22px; height: 22px; stroke-width: 2.25; }
.ricon-shield { width: 48px; height: 48px; stroke-width: 1.75; }
.course-card-category .ricon { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }

/* ── Brandmark — mirrors the marketing site's nav__brand ──── */
.brandmark { display: inline-block; text-decoration: none; color: var(--text-primary); line-height: 1; }
.brandmark-name {
  display: block;
  font-family: var(--rep1-font-display);
  font-style: italic;
  font-size: 30px;
  letter-spacing: -0.06em;
  padding-right: 0.12em; /* italic overhang clip guard */
}
.brandmark-tag {
  display: block;
  font-family: var(--rep1-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 3px;
}
.brandmark--sm .brandmark-name { font-size: 24px; }
.brandmark--sm .brandmark-tag { font-size: 10px; margin-top: 2px; }