/* ==========================================================================
   SBHS — Design tokens
   Brand colors sampled from the official logo (media/logo.svg):
     Blue  (logo wordmark / figure) ≈ #00469E
     Gold  (logo ring / tagline)    ≈ #BE8507 – #D19511
   Change brand values here; Tailwind reads the *-rgb channels
   (see js/tailwind-config.js) so opacity modifiers keep working.
   ========================================================================== */

:root {
  /* ---- Brand (constant across themes) ---- */
  --sbhs-blue: #00469e;
  --sbhs-blue-rgb: 0 70 158;
  --sbhs-blue-dark: #003478;          /* hover / pressed */
  --sbhs-blue-bright: #0a5bc4;
  --sbhs-gold: #be8507;
  --sbhs-gold-rgb: 190 133 7;
  --sbhs-gold-light: #e3b341;         /* supporting gold */
  --sbhs-gold-light-rgb: 227 179 65;
  --sbhs-white: #ffffff;
  --sbhs-navy: #081a24;               /* dark navy */
  --sbhs-navy-rgb: 8 26 36;

  /* ---- Semantic tokens — LIGHT (default) ---- */
  --c-bg: #ffffff;
  --c-bg-rgb: 255 255 255;
  --c-surface: #ffffff;
  --c-surface-rgb: 255 255 255;
  --c-surface-2: #f7f9fc;             /* very light neutral */
  --c-surface-2-rgb: 247 249 252;
  --c-tint-blue: #f1f6fc;             /* very light blue-tinted neutral */
  --c-tint-blue-rgb: 241 246 252;
  --c-tint-gold: #fcf8ef;             /* very subtle gold-tinted neutral */
  --c-tint-gold-rgb: 252 248 239;
  --c-ink: #0f1e2e;                   /* dark text */
  --c-ink-rgb: 15 30 46;
  --c-muted: #4a5a6b;                 /* neutral gray text (7:1 on white) */
  --c-muted-rgb: 74 90 107;
  --c-border: #e3e9f0;
  --c-border-rgb: 227 233 240;
  --c-link: #00469e;
  --c-link-rgb: 0 70 158;
  --c-accent-text: #8a6100;           /* gold text that passes 4.5:1 on white */
  --c-accent-text-rgb: 138 97 0;
  --c-icon-bg: #eaf1fb;
  --c-focus: #0a5bc4;

  /* Primary action (Book an Appointment) */
  --c-primary: var(--sbhs-blue);
  --c-primary-hover: var(--sbhs-blue-dark);
  --c-on-primary: #ffffff;

  --c-success: #1d6b4a;
  --c-success-bg: #eaf6f0;
  --c-error: #9b2c2c;
  --c-error-bg: #fbeeee;

  /* ---- Typography ---- */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", serif;

  /* ---- Shape / depth ---- */
  --radius-sm: 0.625rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --shadow-sm: 0 1px 2px rgb(15 30 46 / 0.06);
  --shadow: 0 1px 2px rgb(15 30 46 / 0.04), 0 8px 24px -8px rgb(15 30 46 / 0.12);
  --shadow-lg: 0 2px 4px rgb(15 30 46 / 0.04), 0 24px 48px -16px rgb(0 52 120 / 0.22);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 600ms;

  /* ---- Layers ---- */
  --z-header: 40;
  --z-overlay: 60;
  --z-drawer: 70;
  --z-skip: 100;

  --header-h: 4.5rem;
  color-scheme: light;
}

/* ---- Semantic tokens — DARK (deep navy, not inverted) ---- */
:root.dark {
  --c-bg: #081a24;
  --c-bg-rgb: 8 26 36;
  --c-surface: #102833;
  --c-surface-rgb: 16 40 51;
  --c-surface-2: #0c212c;
  --c-surface-2-rgb: 12 33 44;
  --c-tint-blue: #0d2433;
  --c-tint-blue-rgb: 13 36 51;
  --c-tint-gold: #13262b;
  --c-tint-gold-rgb: 19 38 43;
  --c-ink: #f5f8f8;
  --c-ink-rgb: 245 248 248;
  --c-muted: #b9c8cc;
  --c-muted-rgb: 185 200 204;
  --c-border: #1f3c48;
  --c-border-rgb: 31 60 72;
  --c-link: #8cb8f2;
  --c-link-rgb: 140 184 242;
  --c-accent-text: #e3b341;
  --c-accent-text-rgb: 227 179 65;
  --c-icon-bg: #15323d;
  --c-focus: #e3b341;

  --c-primary: #e3b341;               /* gold used as the single accent CTA */
  --c-primary-hover: #f0c562;
  --c-on-primary: #081a24;

  --c-success: #7fd1a8;
  --c-success-bg: #10302a;
  --c-error: #f2a7a7;
  --c-error-bg: #3a1c22;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 10px 28px -10px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.25), 0 28px 56px -18px rgb(0 0 0 / 0.6);
  color-scheme: dark;
}