/* ─────────────────────────────────────────────────────────────
   Hello Radio — token layer
   Mesh of: Meta Ad Library measurements (structure, scale)
          + Edward's design-token-system.html (color, type, motion)
   One job: define tokens. No component styles here.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Color — from design-token-system */
  --prim-blue: #1652c5;
  --prim-medium-blue: #19408b;
  --prim-dark-blue: #1a2749;
  --prim-light-beige: #f4f4ee;
  --prim-medium-beige: #edede7;
  --prim-dark-beige: #e7e7d9;
  --prim-white: #fff;
  --prim-success: #027a48;
  --prim-warning: #dc6803;
  --prim-error: #c4320a;

  /* Meta Ad Library palette — measured off the live page 2026-07-22 */
  --meta-page-bg: #f0f2f5;
  --meta-text: #1c1e21;
  --meta-link-blue: #0064d1;
  --meta-active-green: #006b4e;

  /* Semantic — Meta Ad Library scheme (Edward's request 07-22) */
  --page-bg: var(--meta-page-bg);
  --surface: var(--prim-white);
  --text: var(--meta-text);
  --text-secondary: #65676b;
  --text-tertiary: #8a8d91;
  --accent: var(--meta-link-blue);
  --active: var(--meta-active-green);
  --control-bg: rgba(0, 0, 0, 0.05);
  --control-bg-hover: rgba(0, 0, 0, 0.10);
  --divider: rgba(0, 0, 0, 0.10);

  /* Type — Geist everywhere (Edward 07-22: no serif, no mono, Geist only) */
  --font-body: 'Geist', system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-mono: var(--font-body);

  /* Scale — measured off the real Ad Library (12px base, 403px cards) */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 14px;
  --text-display: 26px;

  /* Radius */
  --radius-sm: 6px;   /* Meta's control radius */
  --radius-md: 10px;  /* cards */
  --radius-full: 100px;

  /* Status pill — measured off the real card: #ebf2e6 capsule, 18px tall */
  --status-pill-bg: #ebf2e6;
  --status-pill-ended-bg: #e4e6eb;
  --platform-icon: #64676b;

  /* Avatars, placeholders, focus */
  --avatar-bg: var(--meta-text);
  --placeholder-1: #e4e6eb;
  --placeholder-2: #d8dade;
  --focus-ring: var(--accent);
  --focus-ring-soft: rgba(0, 100, 209, 0.15);
  --border-strong: rgba(0, 0, 0, 0.15);

  /* Elevation — Meta's card shadow, measured: 0 0 5px + 0 0 1px black/10 */
  --shadow-card: 0 0 5px rgba(0,0,0,0.10), 0 0 1px rgba(0,0,0,0.10);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12);
  --shadow-chip: 0 1px 3px rgba(0,0,0,0.08);

  /* Motion — Devouring Details springs, CSS approximations */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-enter: 500ms;
}

/* ── Dark theme — Mobbin's palette, measured off mobbin.com 2026-07-22
   (base #141414; surfaces = white at 6-8%; text #fff/#adadad/#707070;
   borderless). Semantic overrides only — components never change. ── */
:root[data-theme="dark"] {
  --page-bg: #141414;
  --surface: #232323;               /* white 8% flattened over base */
  --text: #ffffff;
  --text-secondary: #adadad;
  --text-tertiary: #707070;
  --accent: #4da3ff;
  --active: #62c07e;
  --control-bg: rgba(255, 255, 255, 0.08);
  --control-bg-hover: rgba(255, 255, 255, 0.14);
  --divider: rgba(255, 255, 255, 0.08);

  --status-pill-bg: rgba(64, 176, 96, 0.16);
  --status-pill-ended-bg: rgba(255, 255, 255, 0.08);
  --platform-icon: #a8abaf;

  --avatar-bg: #383838;
  --placeholder-1: #232323;
  --placeholder-2: #2c2c2c;
  --focus-ring-soft: rgba(77, 163, 255, 0.25);
  --border-strong: rgba(255, 255, 255, 0.14);

  --shadow-card: 0 0 0 1px rgba(255,255,255,0.04);   /* Mobbin: flat, no glow */
  --shadow-card-hover: 0 0 0 1px rgba(255,255,255,0.07), 0 8px 24px rgba(0,0,0,0.4);
  --shadow-chip: none;
}
/* dark surfaces invert text selection */
:root[data-theme="dark"] ::selection { background: #ffffff; color: #141414; }