/* ==========================================================================
   RadhaNaam.in - Design Tokens
   Single source of truth for color, type, spacing, radius and shadow.
   Palette matches the "Radha Naam" peacock-feather + flute logo: a deep
   royal blue and warm gold, with the feather's green reserved for the
   logo mark itself (not spread across the UI). Change the theme by
   editing this file only.
   ========================================================================== */

:root {
  /* ---- Color: surfaces ---- */
  --color-bg: #FAF9F4;            /* soft cream */
  --color-bg-alt: #F2EEE4;        /* slightly deeper cream for section bands */
  --color-surface: #FFFFFF;       /* cards */
  --color-surface-rose: #FBF3E3;  /* soft gold-tinted surface accent */
  --color-header-bg: rgba(250, 249, 244, 0.92); /* translucent sticky header */

  /* ---- Color: text ---- */
  --color-text: #202B3C;          /* near-ink navy - primary text */
  --color-text-muted: #5B6472;    /* secondary text */
  --color-text-inverse: #FFFFFF;  /* text on brand-filled surfaces */

  /* ---- Color: brand ---- */
  --color-blue-900: #123C7A;  /* Radha Blue - solid brand fill: buttons, active pills, sidebars. Stays this blue in BOTH themes, paired with --color-text-inverse, so filled elements never need to change look. */
  --color-blue-700: #1E4E8C;
  --color-blue-500: #2F63A8;
  --color-rose-400: #D9A96B;  /* warm gold-tan accent (borders, arrows) */
  --color-rose-300: #E8C99A;  /* lighter gold-tan (selection, hover accents) */
  --color-rose-100: #FBF0DC;  /* pale gold cream (hover backgrounds, badges) */
  --color-gold-500: #D4900D;  /* Naam Gold - matches the logo's gold exactly */
  --color-gold-300: #E8C77A;
  --color-gold-text: #8C5A00;  /* darkened gold for small text (taglines, eyebrows) - gold-500 is ~2.6:1 on this bg, fails WCAG AA; this hits ~5.6:1 */

  /* Heading/link text that sits directly on a page or card background (not
     on a brand-filled button) - unlike --color-blue-900 above, this DOES
     change in dark mode so headings stay legible against a dark page. */
  --color-heading: #123C7A;
  --color-link: #1E4E8C;

  /* ---- Color: semantic ---- */
  --color-success: #2E7D4F;
  --color-warning: #B8763A;
  --color-danger: #A63E3E;
  --color-border: rgba(18, 42, 90, 0.13);
  --color-focus: #D4900D;

  /* ---- Typography ---- */
  --font-latin: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-devanagari-display: 'Yatra One', 'Noto Sans Devanagari', serif;
  --font-devanagari-body: 'Noto Sans Devanagari', sans-serif;
  --font-script: 'Dancing Script', cursive;  /* the one hand-written line in the hero tagline */

  --fs-hero: clamp(2.5rem, 8vw, 4.5rem);
  --fs-h1: clamp(1.75rem, 5vw, 2.75rem);
  --fs-h2: clamp(1.4rem, 3.5vw, 2rem);
  --fs-h3: clamp(1.15rem, 2.5vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-counter: clamp(3rem, 16vw, 6rem);

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 2px 8px rgba(18, 42, 90, 0.07);
  --shadow-md: 0 8px 24px rgba(18, 42, 90, 0.11);
  --shadow-lg: 0 16px 40px rgba(18, 42, 90, 0.16);

  /* ---- Motion ---- */
  --transition-fast: 120ms ease;
  --transition-base: 220ms ease;
}

/* ==========================================================================
   Breakpoints - CSS custom properties can't be interpolated into a media
   query's condition, so these can't be real tokens; treat these three exact
   pixel values as the site's breakpoint system and reuse them verbatim
   (max-width, so each covers "this size and smaller"):
     420px     - the narrowest phones (extra shrink for long headlines)
     575.98px  - Bootstrap's `sm` boundary (phone vs. small tablet)
     767.98px  - Bootstrap's `md` boundary (tablet vs. desktop nav)
   Bootstrap's own grid (`.col-md-*` etc.) runs in parallel at its standard
   576/768/992/1200 breakpoints - by reusing 575.98/767.98 here, custom CSS
   stays aligned with wherever the grid itself already reflows.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}

/* ==========================================================================
   Dark theme - deep navy with gold accents (a night-sky-and-flute palette,
   deliberately NOT flat black). Light is the fixed default regardless of
   OS preference - dark ONLY applies when a visitor explicitly picks it via
   the toggle (which sets data-theme="dark" on <html> and remembers it).
   Brand-fill tokens (--color-blue-900/700/500, --color-text-inverse) are
   NOT redefined here on purpose - buttons/sidebars stay the same blue with
   light text in both themes; only the surfaces and text that sit directly
   on the page background need to change.
   ========================================================================== */
:root[data-theme="dark"] {
  --color-bg: #0F1E3A;
  --color-bg-alt: #0B1730;
  --color-surface: #172A4D;
  --color-surface-rose: #1E3358;
  --color-header-bg: rgba(11, 23, 48, 0.92);

  --color-text: #E9EEF6;
  --color-text-muted: #A8B4C8;

  --color-rose-400: #C79A52;
  --color-rose-300: #A87F3E;
  --color-rose-100: #24365E;
  --color-gold-500: #E0A83A;
  --color-gold-300: #F0C978;
  --color-gold-text: #E0A83A;  /* already ~7.8:1 on the dark bg, no darkening needed here */

  --color-border: rgba(233, 238, 246, 0.14);
  --color-focus: #E0A83A;

  --color-heading: #F0C978;
  --color-link: #E0A83A;
}