/* ==========================================================================
   VisitHealth — Color tokens
   Brand accent is a single warm orange-red. Two surface modes:
   light = warm cream (default, primary marketing surface)
   dark  = warm near-black (product/booking flows, per brand screenshots)
   ========================================================================== */

:root {
  /* ---- Brand accent (mode-independent) ---- */
  --vh-orange-50:  #FFF1EE;
  --vh-orange-100: #FFDDD5;
  --vh-orange-200: #FFB8A8;
  --vh-orange-300: #FF8C74;
  --vh-orange-400: #FF5D3D;
  --vh-orange-500: #FF3617; /* primary brand orange — sampled from logo */
  --vh-orange-600: #E82A0D;
  --vh-orange-700: #C0210A;
  --vh-orange-800: #931908;
  --vh-orange-900: #611006;

  /* ---- Secondary accent: blue (booking/product flows — links, selection, primary CTA in dark UI) ---- */
  --vh-blue-50:  #F0F6FF;
  --vh-blue-100: #E0ECFF;
  --vh-blue-200: #C7DCFF;
  --vh-blue-300: #A8CAFF;
  --vh-blue-400: #7AADFF;
  --vh-blue-500: #3D87FF;
  --vh-blue-600: #0058E6; /* secondary accent — sampled from booking-flow screens */
  --vh-blue-700: #0047BD;
  --vh-blue-800: #003385;
  --vh-blue-900: #00215C;

  /* ---- Semantic status: success (booking confirmation) ---- */
  --success: #2FCB6B;

  /* ---- Warm neutrals, light end (cream) ---- */
  --vh-cream-50:  #FFFDFA;
  --vh-cream-100: #FBF4E9; /* base light-mode surface */
  --vh-cream-200: #F5EBD9;
  --vh-cream-300: #ECDEC5;
  --vh-cream-400: #DCCBA8;
  --vh-cream-500: #C3AF8C;

  /* ---- Warm neutrals, dark end (near-black) ---- */
  --vh-ink-900: #1E1A1A; /* base dark-mode surface — sampled from product screens */
  --vh-ink-800: #2A2624; /* dark-mode card surface — sampled */
  --vh-ink-700: #3A3532;
  --vh-ink-600: #4E4744;
  --vh-ink-500: #6B625D;
  --vh-ink-400: #8C817A;
  --vh-ink-300: #B3A79D;
  --vh-ink-100: #E8DFD3;
  --vh-ink-000: #0F0D0C;

  /* ---- Semantic: light mode (default) ---- */
  --surface-page: var(--vh-cream-100);
  --surface-raised: var(--vh-cream-50);
  --surface-card: #FFFFFF;
  --surface-sunken: var(--vh-cream-200);
  --surface-inverse: var(--vh-ink-900);

  --text-primary: var(--vh-ink-900);
  --text-secondary: #5B5450;
  --text-tertiary: #8C817A;
  --text-inverse: var(--vh-cream-100);
  --text-accent: var(--vh-orange-500);
  --text-on-accent: #FFFFFF;

  --border-subtle: var(--vh-cream-300);
  --border-default: var(--vh-cream-400);
  --border-strong: var(--vh-ink-500);

  --accent: var(--vh-orange-500);
  --accent-hover: var(--vh-orange-600);
  --accent-active: var(--vh-orange-700);
  --accent-subtle: var(--vh-orange-50);

  --accent-secondary: var(--vh-blue-600);
  --accent-secondary-hover: var(--vh-blue-700);
  --accent-secondary-active: var(--vh-blue-800);
  --accent-secondary-subtle: var(--vh-blue-50);

  --focus-ring: var(--vh-orange-400);

  --shadow-color: 30 26 20;
}

/* ---- Semantic: dark mode ---- */
[data-theme="dark"] {
  --surface-page: var(--vh-ink-900);
  --surface-raised: var(--vh-ink-800);
  --surface-card: var(--vh-ink-800);
  --surface-sunken: var(--vh-ink-000);
  --surface-inverse: var(--vh-cream-100);

  --text-primary: #FFFFFF;
  --text-secondary: #C9C0B8;
  --text-tertiary: #948A83;
  --text-inverse: var(--vh-ink-900);
  --text-accent: var(--vh-orange-500);
  --text-on-accent: #FFFFFF;

  --border-subtle: var(--vh-ink-700);
  --border-default: var(--vh-ink-600);
  --border-strong: var(--vh-ink-400);

  --accent: var(--vh-orange-500);
  --accent-hover: var(--vh-orange-400);
  --accent-active: var(--vh-orange-300);
  --accent-subtle: rgba(255, 54, 23, 0.14);

  --accent-secondary: var(--vh-blue-600);
  --accent-secondary-hover: var(--vh-blue-500);
  --accent-secondary-active: var(--vh-blue-400);
  --accent-secondary-subtle: rgba(0, 88, 230, 0.16);

  --focus-ring: var(--vh-orange-400);

  --shadow-color: 0 0 0;
}