/* TastePilot — Color System
 * Warm premium: Amber = the drink, Teal = your route/discovery, Navy = trust & night bar.
 * Brand hues are shared across themes; only surfaces, text and borders re-theme.
 */

:root {
  /* ---- Raw brand palette (theme-independent) ---- */
  --tp-navy: #123047;          /* Deep Navy */
  --tp-teal: #1F7A74;          /* Bar Teal (light) */
  --tp-teal-bright: #7ED6C4;   /* Pilot Teal (dark) */
  --tp-amber: #F2A541;         /* Aperitif Amber */
  --tp-amber-light: #F2B35C;   /* Warm Amber (on dark) */
  --tp-coral: #FF7A59;         /* Citrus Coral */
  --tp-coral-deep: #D65A3A;    /* risk (light) */

  --tp-cream: #FFF8EF;         /* Warm Canvas */
  --tp-white: #FFFFFF;
  --tp-sand: #FBF1E5;          /* surface elevated (light) */
  --tp-ink: #18222B;           /* primary ink */
  --tp-slate: #6A747C;         /* muted */
  --tp-border-warm: #E8DCCB;
  --tp-divider-warm: #EDE3D3;
  --tp-track-warm: #EFE3D2;

  --tp-night-bg: #0B1117;      /* Night Background */
  --tp-night-surface: #121C25; /* Night Surface */
  --tp-night-surface-el: #18242E;
  --tp-cream-text: #F5F0E8;    /* Cream Text */
  --tp-night-muted: #A9B4BD;
  --tp-night-border: #2A3845;
  --tp-night-divider: #1E2A34;
  --tp-track-night: #22303B;

  /* ---- Semantic tokens — LIGHT theme (default) ---- */
  --bg: var(--tp-cream);
  --surface: var(--tp-white);
  --surface-el: var(--tp-sand);
  --text: var(--tp-ink);
  --muted: var(--tp-slate);
  --border: var(--tp-border-warm);
  --divider: var(--tp-divider-warm);

  --navy: var(--tp-navy);
  --teal: var(--tp-teal);
  --amber: var(--tp-amber);
  --amber-alt: var(--tp-amber-light);
  --coral: var(--tp-coral);
  --track: var(--tp-track-warm);

  --btn-bg: var(--tp-navy);
  --btn-text: var(--tp-white);
  --scrim: var(--tp-cream);

  --hero-1: #1a4a5c;
  --hero-2: var(--tp-navy);
  --warn-bg: #FFF3E8;
  --warn-border: rgba(242, 165, 65, 0.33);

  /* Tab bar — inactive icon/label + hairline are brand-tinted (navy), not gray */
  --tab-inactive: rgba(18, 48, 71, 0.45);
  --tab-hairline: rgba(18, 48, 71, 0.14);

  /* ---- Personal Fit bands ---- */
  --fit-great: var(--tp-teal);   /* 85–100 */
  --fit-good: var(--tp-teal);    /* 70–84  */
  --fit-worth: var(--tp-amber);  /* 55–69  */
  --fit-risky: var(--tp-amber);  /* 40–54  */
  --fit-low: var(--tp-coral);    /* 0–39   */
}

/* ---- Semantic tokens — DARK theme ---- */
[data-theme="dark"] {
  --bg: var(--tp-night-bg);
  --surface: var(--tp-night-surface);
  --surface-el: var(--tp-night-surface-el);
  --text: var(--tp-cream-text);
  --muted: var(--tp-night-muted);
  --border: var(--tp-night-border);
  --divider: var(--tp-night-divider);

  --teal: var(--tp-teal-bright);   /* brightened for contrast */
  --amber: var(--tp-amber-light);
  --track: var(--tp-track-night);

  --btn-bg: var(--tp-teal-bright); /* primary inverts on dark */
  --btn-text: var(--tp-night-bg);
  --scrim: var(--tp-night-bg);

  --hero-1: #12303f;
  --hero-2: var(--tp-night-bg);
  --warn-bg: #231a12;
  --warn-border: rgba(242, 179, 92, 0.33);

  --tab-inactive: rgba(245, 240, 232, 0.45);
  --tab-hairline: rgba(245, 240, 232, 0.12);

  --fit-great: var(--tp-teal-bright);
  --fit-good: var(--tp-teal-bright);
  --fit-worth: var(--tp-amber-light);
  --fit-risky: var(--tp-amber-light);
  --fit-low: var(--tp-coral);
}