/* Vishwa Energy design tokens. Single source of truth for the website (and reference for print).
   Themes: set <html data-theme="sunrise | vishwa-blue | daylight">. Default = sunrise.
   Contrast-checked pairings: see brand/palette.md. */

:root {
  /* ---- brand constants (never change between themes) ---- */
  --vw-midnight: #0F1D4A;
  --vw-blue: #0054A5;          /* client's Vishwa Blue */
  --vw-gold: #FFC93C;
  --vw-saffron: #FF8A1A;
  --vw-burnt: #7A2E00;
  --vw-daylight: #FFF6E0;
  --vw-sky: #E8F1FB;
  --vw-steel: #5C6675;
  --vw-white: #FFFFFF;
  --vw-whatsapp: #25D366;      /* button text on it must be midnight (white fails: 1.98:1) */

  /* ---- type ---- */
  --font-display: "Unbounded", system-ui, sans-serif;               /* wordmark, big headings */
  --font-text: "Inter", "Mukta", system-ui, sans-serif;              /* everything else */
  --font-deva: "Mukta", "Noto Sans Devanagari", system-ui, sans-serif; /* Hindi + Marathi */

  /* ---- spacing scale (4 px base) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* ---- radius, shadow, motion ---- */
  --radius-s: 8px; --radius-m: 14px; --radius-l: 24px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15, 29, 74, .08), 0 4px 12px rgba(15, 29, 74, .06);
  --shadow-2: 0 10px 30px rgba(15, 29, 74, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 150ms; --dur: 300ms; --dur-slow: 600ms;
}

/* ---- semantic tokens per theme ---- */
:root,
[data-theme="sunrise"],
[data-theme="midnight-sun"] {   /* "sunrise" is the default theme; "midnight-sun" kept as an old alias */
  --surface: var(--vw-daylight);        /* page */
  --surface-alt: #FFFFFF;               /* alternating sections, cards */
  --surface-dark: var(--vw-midnight);   /* hero, footer, dark sections */
  --text: var(--vw-midnight);
  --text-muted: var(--vw-steel);
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: rgba(255, 255, 255, .78);
  --heading-accent: var(--vw-blue);
  --action: var(--vw-blue);             /* buttons on light */
  --action-text: #FFFFFF;
  --action-hover: #00468A;
  --action-on-dark: var(--vw-gold);     /* buttons on dark */
  --action-on-dark-text: var(--vw-midnight);
  --accent: var(--vw-gold);
  --accent-2: var(--vw-saffron);
  --line: rgba(15, 29, 74, .12);
  --focus: var(--vw-blue);              /* focus ring on light surfaces (7.5:1 on white) */
  --focus-on-dark: var(--vw-gold);      /* focus ring on dark surfaces (10.6:1 on midnight) */
}

[data-theme="vishwa-blue"] {
  --surface: #FFFFFF;
  --surface-alt: var(--vw-sky);
  --surface-dark: var(--vw-blue);
  --text: var(--vw-midnight);
  --text-muted: var(--vw-steel);
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: rgba(255, 255, 255, .85);
  --heading-accent: var(--vw-blue);
  --action: var(--vw-midnight);
  --action-text: #FFFFFF;
  --action-hover: #1B2C66;
  --action-on-dark: var(--vw-gold);
  --action-on-dark-text: var(--vw-midnight);
  --accent: var(--vw-gold);
  --accent-2: var(--vw-saffron);
  --line: rgba(0, 84, 165, .16);
  --focus: var(--vw-blue);
  --focus-on-dark: var(--vw-gold);      /* 4.9:1 on Vishwa Blue */
}

[data-theme="daylight"] {
  --surface: #FFFFFF;
  --surface-alt: var(--vw-daylight);
  --surface-dark: var(--vw-daylight);   /* light hero: text uses --text-on-dark below */
  --text: var(--vw-midnight);
  --text-muted: var(--vw-steel);
  --text-on-dark: var(--vw-midnight);
  --text-on-dark-muted: var(--vw-steel);
  --heading-accent: var(--vw-blue);
  --action: var(--vw-blue);
  --action-text: #FFFFFF;
  --action-hover: #00468A;
  --action-on-dark: var(--vw-blue);
  --action-on-dark-text: #FFFFFF;
  --accent: var(--vw-saffron);
  --accent-2: var(--vw-gold);
  --line: rgba(15, 29, 74, .12);
  --focus: var(--vw-blue);
  --focus-on-dark: var(--vw-blue);      /* daylight hero is light */
}