/* Vishwa Energy website: UI tokens (website/docs/ui-spec.md §3.5). Loaded after css/tokens.css.
   No new brand colours: every value is a brand constant, a stop from the business card's own gradients,
   or an alpha of a brand colour. Together with css/tokens.css, this is the only file allowed to hold colours. */

:root {
  /* card-derived */
  --vw-sun: #FFF1BF;                 /* foil highlight stop: the Sun disc */
  --vw-gold-hover: #FFD873;          /* foil stop */
  --vw-foil-deep: #E89A10;           /* foil stop (darkest) */
  --vw-foil: linear-gradient(180deg, var(--vw-sun) 0%, var(--vw-gold) 45%, var(--vw-foil-deep) 72%, var(--vw-gold-hover) 100%);
  --vw-day-field: linear-gradient(135deg, #FFDB6E 0%, #FFC03A 55%, #FFA31F 100%);
  --beam-rule: linear-gradient(var(--vw-gold) 0 50%, var(--vw-saffron) 50% 100%); /* 4px: gold over saffron */
  --beam-rule-v: linear-gradient(90deg, var(--vw-gold) 0 50%, var(--vw-saffron) 50% 100%);
  --night-muted: #CACDD7;            /* white 78 % flattened on Midnight (10.21:1) */
  --night-line: rgba(255, 255, 255, .16);
  --night-line-strong: rgba(255, 255, 255, .78);
  --night-tint: rgba(255, 255, 255, .10);
  --wa-ring: var(--vw-midnight);

  /* Golden-hour sky and the Sun (client direction, 3 Nov: the Sun must never read as a moon).
     Sky: clear blue at the top, warming to peach and amber at the horizon. Every stop is a mix of brand colours.
     Midnight is a UI colour only; it is never a sky behind the Sun. */
  --sky-top: color-mix(in srgb, var(--vw-blue) 45%, var(--vw-sky));        /* about #80AAD4 */
  --sky-mid: var(--vw-sky);
  --sky-warm: color-mix(in srgb, var(--vw-saffron) 30%, var(--vw-daylight)); /* peach */
  --sky-horizon: color-mix(in srgb, var(--vw-gold) 70%, var(--vw-daylight)); /* amber */
  --sky-dawn: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-warm) 80%, var(--sky-horizon) 100%);
  /* the Sun: a saffron-gold core (never a pale disc), a large warm bloom, and visible rays */
  --sun-core: radial-gradient(circle, var(--vw-gold-hover) 0 28%, var(--vw-gold) 58%, var(--vw-saffron) 100%);
  --sun-bloom: radial-gradient(circle, color-mix(in srgb, var(--vw-gold) 75%, transparent) 0, color-mix(in srgb, var(--vw-saffron) 35%, transparent) 36%, transparent 68%);
  --sun-rays: repeating-conic-gradient(from 4deg, color-mix(in srgb, var(--vw-saffron) 80%, transparent) 0 8deg, transparent 8deg 30deg);

  /* beam geometry, measured from assets/photos/heater-night.jpg */
  --beam-floor: 6deg; --beam-lo: 16deg; --beam-hi: 28deg;
  --sun-x: 92.5%; --sun-y: 91%; --sun-r: 5.7%;

  /* layout */
  --container: 1200px; --margin: 16px; --gap: 16px; --cols: 4;
  --section-pad: var(--space-8); --stack: var(--space-6);
  --bar-h: 64px; --actionbar-h: 64px; --tap: 44px;

  /* type */
  --fs-h1: clamp(1.875rem, 1.2rem + 3vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.05rem + 2vw, 2.5rem);
  --fs-h3: clamp(1.1875rem, 1.06rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.93rem + 0.3vw, 1.125rem);
  --fs-num: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --fs-label: 1rem; --fs-small: .875rem; --fs-eyebrow: .875rem;
  --lh-h1: 1.08; --lh-h2: 1.15; --lh-h3: 1.3; --lh-lead: 1.5; --lh-body: 1.6; --lh-small: 1.5; --lh-label: 1.2;
}
@media (min-width: 768px)  { :root { --margin: 32px; --gap: 24px; --cols: 8; --section-pad: var(--space-9); --stack: var(--space-7); --fs-h1: 2.75rem; } }
@media (min-width: 1024px) { :root { --cols: 12; --bar-h: 72px; --fs-h1: clamp(2.75rem, .4rem + 3.6vw, 3.25rem); } }
@media (min-width: 1440px) { :root { --section-pad: var(--space-10); } }
:lang(hi), :lang(mr) { --fs-small: .9375rem; --fs-eyebrow: .9375rem;
  --lh-h1: 1.3; --lh-h2: 1.35; --lh-h3: 1.45; --lh-lead: 1.7; --lh-body: 1.75; --lh-small: 1.65; --lh-label: 1.4; }

:root, [data-theme="sunrise"], [data-theme="midnight-sun"] {   /* "midnight-sun" = old name of "sunrise" */
  --icon: var(--vw-blue);  --icon-on-dark: var(--vw-gold);
  --eyebrow: var(--vw-burnt); --eyebrow-on-dark: var(--vw-gold); --text-accent-on-dark: var(--vw-gold);
  --action-on-dark-hover: var(--vw-gold-hover);
  --line-strong: var(--vw-steel); --line-on-dark: rgba(255, 255, 255, .16);
  --hover-tint: rgba(15, 29, 74, .06); --hover-tint-on-dark: rgba(255, 255, 255, .10);
  --focus-on-light: var(--vw-midnight); --focus-on-dark: var(--vw-gold);
  --error: var(--vw-burnt); --error-tint: rgba(122, 46, 0, .08);
  --wordmark: var(--vw-foil); --wordmark-fill: url(#vw-foil); --badge-ring: transparent; --beam-blend: screen;
  --theme-color: var(--vw-midnight);
}
[data-theme="vishwa-blue"] {
  --icon: var(--vw-blue);  --icon-on-dark: var(--vw-gold);
  --eyebrow: var(--vw-burnt); --eyebrow-on-dark: var(--vw-gold); --text-accent-on-dark: var(--vw-gold);
  --action-on-dark-hover: var(--vw-gold-hover);
  --line-strong: var(--vw-steel); --line-on-dark: rgba(255, 255, 255, .20);
  --hover-tint: rgba(0, 84, 165, .06); --hover-tint-on-dark: rgba(255, 255, 255, .10);
  --focus-on-light: var(--vw-midnight); --focus-on-dark: var(--vw-gold);
  --error: var(--vw-burnt); --error-tint: rgba(122, 46, 0, .08);
  --wordmark: var(--vw-foil); --wordmark-fill: url(#vw-foil); --badge-ring: transparent; --beam-blend: screen;
  --theme-color: var(--vw-blue);
}
[data-theme="daylight"] {
  --icon: var(--vw-blue);  --icon-on-dark: var(--vw-blue);
  --eyebrow: var(--vw-burnt); --eyebrow-on-dark: var(--vw-burnt); --text-accent-on-dark: var(--vw-burnt);
  --action-on-dark-hover: var(--action-hover);
  --line-strong: var(--vw-steel); --line-on-dark: var(--line);
  --hover-tint: rgba(15, 29, 74, .06); --hover-tint-on-dark: rgba(15, 29, 74, .06);
  --focus-on-light: var(--vw-midnight); --focus-on-dark: var(--vw-midnight);
  --error: var(--vw-burnt); --error-tint: rgba(122, 46, 0, .08);
  --wordmark: var(--vw-blue); --wordmark-fill: var(--vw-blue); --badge-ring: var(--vw-blue); --beam-blend: multiply;
  --theme-color: var(--vw-daylight);
}

/* ---- surface contexts (ui-spec §3.1). Components read only the --c-* aliases. ---- */
.ctx-light { background: var(--surface); }
.ctx-alt   { background: var(--surface-alt); }
.ctx-light, .ctx-alt, .ctx-card {
  --c-bg: var(--surface);
  --c-fg: var(--text);              --c-muted: var(--text-muted);
  --c-accent: var(--heading-accent); --c-eyebrow: var(--eyebrow);  --c-icon: var(--icon);
  --c-btn: var(--action);           --c-btn-fg: var(--action-text);  --c-btn-hover: var(--action-hover);
  --c-line: var(--line);            --c-line-strong: var(--line-strong);
  --c-ring: var(--focus-on-light);  --c-tint: var(--hover-tint);
  --c-disc: var(--surface-dark);    --c-disc-fg: var(--icon-on-dark);
  color: var(--c-fg);
}
.ctx-alt { --c-bg: var(--surface-alt); }
/* the form card: white in every theme, so inputs always sit on a white field */
.ctx-card { --c-bg: var(--vw-white); background: var(--vw-white); }
.ctx-dark {
  background: var(--surface-dark);
  --c-bg: var(--surface-dark);
  --c-fg: var(--text-on-dark);      --c-muted: var(--text-on-dark-muted);
  --c-accent: var(--text-accent-on-dark); --c-eyebrow: var(--eyebrow-on-dark); --c-icon: var(--icon-on-dark);
  --c-btn: var(--action-on-dark);   --c-btn-fg: var(--action-on-dark-text); --c-btn-hover: var(--action-on-dark-hover);
  --c-line: var(--line-on-dark);    --c-line-strong: var(--text-on-dark-muted);
  --c-ring: var(--focus-on-dark);   --c-tint: var(--hover-tint-on-dark);
  --c-disc: var(--surface-dark);    --c-disc-fg: var(--icon-on-dark);
  color: var(--c-fg);
}
.ctx-day {                           /* the card back's gold field: the same in every theme */
  background: var(--vw-day-field);
  --c-bg: var(--vw-gold);
  --c-fg: var(--vw-midnight);       --c-muted: var(--vw-midnight);   /* steel on gold is 3.78: not allowed */
  --c-accent: var(--vw-midnight);   --c-eyebrow: var(--vw-burnt);    --c-icon: var(--vw-gold);
  --c-btn: var(--vw-midnight);      --c-btn-fg: var(--vw-white);     --c-btn-hover: var(--action-hover);
  --c-line: var(--line);            --c-line-strong: var(--vw-midnight);
  --c-ring: var(--vw-midnight);     --c-tint: var(--hover-tint);
  --c-disc: var(--vw-midnight);     --c-disc-fg: var(--vw-gold);
  color: var(--c-fg);
}
/* Constant night and day windows, the same in every theme (the card front and the card back's light).
   Used by the "Day, night, power cut" stage and the generator card's night window. */
.ctx-night {
  background: var(--vw-midnight);
  --c-bg: var(--vw-midnight);
  --c-fg: var(--vw-white);          --c-muted: var(--night-muted);
  --c-accent: var(--vw-gold);       --c-eyebrow: var(--vw-gold);     --c-icon: var(--vw-gold);
  --c-btn: var(--vw-gold);          --c-btn-fg: var(--vw-midnight);  --c-btn-hover: var(--vw-gold-hover);
  --c-line: var(--night-line);      --c-line-strong: var(--night-line-strong);
  --c-ring: var(--vw-gold);         --c-tint: var(--night-tint);
  --c-disc: var(--vw-midnight);     --c-disc-fg: var(--vw-gold);
  color: var(--c-fg);
}
.ctx-sunlit {
  background: var(--vw-daylight);
  --c-bg: var(--vw-daylight);
  --c-fg: var(--vw-midnight);       --c-muted: var(--vw-steel);
  --c-accent: var(--vw-blue);       --c-eyebrow: var(--vw-burnt);    --c-icon: var(--vw-blue);
  --c-btn: var(--vw-blue);          --c-btn-fg: var(--vw-white);     --c-btn-hover: var(--action-hover);
  --c-line: rgba(15, 29, 74, .12);  --c-line-strong: var(--vw-steel);
  --c-ring: var(--vw-midnight);     --c-tint: rgba(15, 29, 74, .06);
  --c-disc: var(--vw-midnight);     --c-disc-fg: var(--vw-gold);
  color: var(--c-fg);
}
/* A golden-hour sky window: the day state of "Day, night, power cut", the generator card and the story art.
   Text on the sky itself is Midnight only (5.0:1 or better on the bluest stop); muted text sits on opaque tiles. */
.ctx-sky {
  background: var(--sky-dawn);
  --c-bg: var(--vw-daylight);
  --c-fg: var(--vw-midnight);       --c-muted: var(--vw-steel);
  --c-accent: var(--vw-blue);       --c-eyebrow: var(--vw-burnt);    --c-icon: var(--vw-blue);
  --c-btn: var(--vw-blue);          --c-btn-fg: var(--vw-white);     --c-btn-hover: var(--action-hover);
  --c-line: rgba(15, 29, 74, .14);  --c-line-strong: var(--vw-steel);
  --c-ring: var(--vw-midnight);     --c-tint: rgba(15, 29, 74, .06);
  --c-disc: var(--vw-midnight);     --c-disc-fg: var(--vw-gold);
  color: var(--c-fg);
}