/* =========================================================
   THEME - every colour on the site lives here.
   Light mode is the default. Dark mode and the niche modes
   (Fitness / Tech / Life) only override what changes.
   ========================================================= */

/* Smooth colour fades when switching theme/niche (modern browsers) */
@property --bg        { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --text      { syntax: '<color>'; inherits: true; initial-value: #0F1419; }
@property --accent    { syntax: '<color>'; inherits: true; initial-value: #1D9BF0; }
@property --btn       { syntax: '<color>'; inherits: true; initial-value: #1D9BF0; }
@property --surface   { syntax: '<color>'; inherits: true; initial-value: #F7F9F9; }
@property --surface-2 { syntax: '<color>'; inherits: true; initial-value: #EFF3F4; }

/* ---------- LIGHT (default): white + blue ---------- */
:root {
  --bg: #FFFFFF;
  --text: #0F1419;
  --muted: #536471;
  --faint: #8B98A5;
  --surface: #F7F9F9;
  --surface-2: #EFF3F4;
  --line: #E1E8ED;

  --chip: #E8F5FE;          /* brand circles, question stickers */
  --chip-text: #0F1419;
  --chip-muted: #536471;

  --accent: #1D9BF0;        /* tick, rings, notes, active tab, icons */
  --accent-text: #FFFFFF;   /* text sitting on the accent */
  --btn: #1D9BF0;           /* Book me / Send */
  --btn-text: #FFFFFF;
  --accent-on-dark: #7CC4F8;/* accent used inside the dark pop-ups */
  --receipt-accent: #1D9BF0;/* prices + note on the light Rates receipt */

  --cover-1: #1D9BF0;       /* placeholder video tiles (until you add posters) */
  --cover-2: #1570B8;
  --cover-3: #0F4C81;

  --overlay: rgba(15, 15, 15, 0.98); /* pop-up background */
}

/* ---------- DARK: dark grey + white + blue ---------- */
:root[data-theme="dark"] {
  --bg: #262626;
  --text: #FFFFFF;
  --muted: #C4C4C4;
  --faint: #9A9A9A;
  --surface: #303030;
  --surface-2: #3A3A3A;
  --line: #444444;

  --chip: #F2F2F2;
  --chip-text: #262626;
  --chip-muted: #4A4A4A;

  --accent: #1D9BF0;
  --accent-text: #FFFFFF;
  --btn: #1D9BF0;
  --btn-text: #FFFFFF;
  --accent-on-dark: #7CC4F8;

  --cover-1: #3B3B3B;
  --cover-2: #444444;
  --cover-3: #353535;
}

/* ---------- NICHE MODES (light) ---------- */
:root[data-niche="fitness"] { --accent: #E8590C; --btn: #E8590C; --accent-text: #FFFFFF; --btn-text: #FFFFFF; --accent-on-dark: #FF9A62; --receipt-accent: #E8590C; }
:root[data-niche="tech"]    { --accent: #6741D9; --btn: #6741D9; --accent-text: #FFFFFF; --btn-text: #FFFFFF; --accent-on-dark: #B197FC; --receipt-accent: #6741D9; }
:root[data-niche="life"]    { --accent: #099268; --btn: #099268; --accent-text: #FFFFFF; --btn-text: #FFFFFF; --accent-on-dark: #63E6BE; --receipt-accent: #099268; }

/* ---------- NICHE MODES (dark) - softer tints so they read on grey ---------- */
:root[data-theme="dark"][data-niche="fitness"] { --accent: #FF9A62; --btn: #FF9A62; --accent-text: #1A1A1A; --btn-text: #1A1A1A; }
:root[data-theme="dark"][data-niche="tech"]    { --accent: #B197FC; --btn: #B197FC; --accent-text: #1A1A1A; --btn-text: #1A1A1A; }
:root[data-theme="dark"][data-niche="life"]    { --accent: #63E6BE; --btn: #63E6BE; --accent-text: #1A1A1A; --btn-text: #1A1A1A; }