/* tokens.css — design tokens / theme variables
 * Light theme on :root, dark overrides under [data-theme="dark"].
 */

:root {
  /* Brand (theme-independent) */
  --pink: #FF2E74;

  /* Surfaces */
  --bg: #F4F4F5;
  --card: #FFFFFF;
  --card-2: #FAFAFB;

  /* Text */
  --text: #0B0B0D;
  --text-secondary: #6B6B73;
  --text-tertiary: #AFAFB6;

  /* Lines */
  --line: rgba(11, 11, 13, 0.07);

  /* Pink accents */
  --pink-text: #D11A5C;
  --pink-soft: #FFE3EE;
  --pink-line: rgba(255, 46, 116, 0.22);
  /* Gentler than --pink-soft: a full-width row highlight (Schedule's today
   * row), not a chip fill. */
  --pink-wash: rgba(255, 46, 116, 0.10);

  /* Status */
  --green: #129D6E;

  /* Destructive (delete) — distinct from brand pink */
  --red: #DC2626;
  --red-text: #DC2626;
  --red-soft: #FEE2E2;

  /* Radii (rectangular containers halved 2026-07 for a squarer look; pills
   * and circles stay fully round via --r-pill / 50%) */
  --r-memo: 11px;
  --r-summary: 10px;
  --r-list: 9px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-pink: 0 10px 30px rgba(255, 46, 116, 0.53);

  /* Avatar palette: 7-color rainbow cycled by speaker index (pink, orange,
   * yellow, green, blue, indigo, violet — speaker 8 wraps back to pink).
   * No near-black entries: every color reads against the dark bg.
   * Exposed as a CSS list for JS to read via getComputedStyle(...).getPropertyValue('--avatar-palette') */
  --avatar-palette: #FF2E74, #F5920B, #E8B923, #2BB673, #2E8FEB, #7A5AF0, #B84AD6;
}

/* [data-immersive="dark"] reuses the exact dark values so the Recording view's
 * forced-dark immersive mode stays in sync with the dark theme automatically. */
[data-theme="dark"],
[data-immersive="dark"] {
  /* Surfaces */
  --bg: #0B0B0D;
  --card: #161619;
  --card-2: #1F1F24;

  /* Text */
  --text: #FFFFFF;
  --text-secondary: rgba(235, 235, 245, 0.62);
  --text-tertiary: rgba(235, 235, 245, 0.34);

  /* Lines */
  --line: rgba(255, 255, 255, 0.09);

  /* Pink accents */
  --pink-text: #FF6CA0;
  --pink-soft: rgba(255, 46, 116, 0.16);
  --pink-line: rgba(255, 46, 116, 0.34);
  /* Slightly higher alpha than light's 0.10 — low-alpha pink sinks into dark
   * surfaces, so 0.13 is what reads as the SAME gentle highlight there. */
  --pink-wash: rgba(255, 46, 116, 0.13);

  /* Status */
  --green: #3DDC97;

  /* Destructive (delete) — distinct from brand pink */
  --red: #E5484D;
  --red-text: #FF6B6B;
  --red-soft: rgba(229, 72, 77, 0.18);
}