/* ==========================================================================
   Dr Nikhil's Vighnaharta Clinic — Theme Tokens
   Light + Dark mode design tokens. Toggled via [data-theme] on <html>,
   falling back to prefers-color-scheme when the user hasn't chosen.
   ========================================================================== */

:root {
  /* Brand palette (from the clinic mark) */
  --brand-navy: #123a5e;
  --brand-navy-700: #0d2c47;
  --brand-teal: #14988a;
  --brand-teal-600: #0d7a6e;
  --brand-gold: #d4820a;
  --brand-red: #dc2626;

  /* Light theme surface tokens */
  --color-bg: #f4f7fa;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-surface-glass: rgba(255, 255, 255, 0.65);
  --color-surface-glass-strong: rgba(255, 255, 255, 0.85);
  --color-border: rgba(18, 58, 94, 0.12);
  --color-border-strong: rgba(18, 58, 94, 0.22);

  --color-text: #10233a;
  --color-text-muted: #52697f;
  --color-text-subtle: #8296a8;
  --color-text-inverse: #ffffff;

  --color-primary: var(--brand-navy);
  --color-primary-hover: var(--brand-navy-700);
  --color-accent: var(--brand-teal);
  --color-accent-hover: var(--brand-teal-600);
  --color-gold: var(--brand-gold);

  --color-success: #16a34a;
  --color-success-bg: rgba(22, 163, 74, 0.12);
  --color-warning: #d97706;
  --color-warning-bg: rgba(217, 119, 6, 0.12);
  --color-danger: #dc2626;
  --color-danger-bg: rgba(220, 38, 38, 0.12);
  --color-info: #2563eb;
  --color-info-bg: rgba(37, 99, 235, 0.12);

  --shadow-sm: 0 1px 2px rgba(16, 35, 58, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 35, 58, 0.08);
  --shadow-lg: 0 20px 48px rgba(16, 35, 58, 0.14);
  --shadow-glow: 0 0 0 1px rgba(20, 152, 138, 0.15), 0 8px 24px rgba(20, 152, 138, 0.18);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --blur-glass: 20px;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  color-scheme: light;
}

/* ---- Dark mode: system preference (no explicit choice made) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b1622;
    --color-bg-elevated: #101f30;
    --color-surface: #101f30;
    --color-surface-glass: rgba(16, 31, 48, 0.55);
    --color-surface-glass-strong: rgba(16, 31, 48, 0.82);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    --color-text: #eef3f8;
    --color-text-muted: #a9bbcc;
    --color-text-subtle: #728499;
    --color-text-inverse: #0b1622;

    --color-primary: #4c8fc4;
    --color-primary-hover: #6ba5d4;
    --color-accent: #2dd4bf;
    --color-accent-hover: #5eead4;
    --color-gold: #f0b429;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 0 1px rgba(45, 212, 191, 0.2), 0 8px 24px rgba(45, 212, 191, 0.18);

    color-scheme: dark;
  }
}

/* ---- Dark mode: explicit user choice (wins in both directions) ---- */
:root[data-theme="dark"] {
  --color-bg: #0b1622;
  --color-bg-elevated: #101f30;
  --color-surface: #101f30;
  --color-surface-glass: rgba(16, 31, 48, 0.55);
  --color-surface-glass-strong: rgba(16, 31, 48, 0.82);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-text: #eef3f8;
  --color-text-muted: #a9bbcc;
  --color-text-subtle: #728499;
  --color-text-inverse: #0b1622;

  --color-primary: #4c8fc4;
  --color-primary-hover: #6ba5d4;
  --color-accent: #2dd4bf;
  --color-accent-hover: #5eead4;
  --color-gold: #f0b429;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px rgba(45, 212, 191, 0.2), 0 8px 24px rgba(45, 212, 191, 0.18);

  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}