/* Bhaashi design system: Stories palette v2 (decision D012), shared by every Bhaashi surface.
   Light "day" after tesla.com, dark "bedtime" after mystorybot.com. Flat buttons; gradients on titles only.
   Every text pair meets WCAG AA. Follows the device setting; add class "light" or "dark" on <html> to force. */
:root {
  --bg: #FFFFFF; --panel: #FFFFFF; --soft: #F4F4F4; --input: #F4F4F4; --line: #E2E3E5;
  --text: #171A20; --muted: #5C5E62;
  --primary: #3E6AE1; --primary-hover: #3457C7; --on-primary: #FFFFFF; --accent-text: #3E6AE1;
  --secondary-bg: #F4F4F4; --secondary-bg-hover: #EAEAEA; --secondary-border: transparent; --secondary-text: #393C41;
  --ring: rgba(62, 106, 225, 0.45);
  --ok: #1F7A4D; --warn: #9A6200; --bad: #B42318;
  --title-gradient: linear-gradient(100deg, #3E6AE1 0%, #6D5BF5 50%, #9333EA 100%);
  --font-ui: "Avenir Next", "Segoe UI Variable Text", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: ui-rounded, "Avenir Next", "SF Pro Rounded", "Segoe UI Variable Display", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg: #06040D; --panel: #14102A; --soft: #1E1838; --input: #1A1633; --line: rgba(255, 255, 255, 0.10);
    --text: #F5F3FF; --muted: #B9B3CC;
    --primary: #9333EA; --primary-hover: #7E22CE; --on-primary: #FFFFFF; --accent-text: #D8B4FE;
    --secondary-bg: rgba(255, 255, 255, 0.05); --secondary-bg-hover: rgba(255, 255, 255, 0.10); --secondary-border: rgba(255, 255, 255, 0.16); --secondary-text: #F5F3FF;
    --ring: rgba(216, 180, 254, 0.55);
    --ok: #6EE7A8; --warn: #FCD34D; --bad: #FCA5A5;
    --title-gradient: linear-gradient(100deg, #C4B5FD 0%, #D8B4FE 50%, #F0ABFC 100%);
    color-scheme: dark;
  }
}
:root.dark {
  --bg: #06040D; --panel: #14102A; --soft: #1E1838; --input: #1A1633; --line: rgba(255, 255, 255, 0.10);
  --text: #F5F3FF; --muted: #B9B3CC; --primary: #9333EA; --primary-hover: #7E22CE; --accent-text: #D8B4FE;
  --secondary-bg: rgba(255, 255, 255, 0.05); --secondary-bg-hover: rgba(255, 255, 255, 0.10); --secondary-border: rgba(255, 255, 255, 0.16); --secondary-text: #F5F3FF;
  --ring: rgba(216, 180, 254, 0.55); --ok: #6EE7A8; --warn: #FCD34D; --bad: #FCA5A5;
  --title-gradient: linear-gradient(100deg, #C4B5FD 0%, #D8B4FE 50%, #F0ABFC 100%); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--font-ui); -webkit-text-size-adjust: 100%; }
a { color: var(--accent-text); }
h1, h2 { font-family: var(--font-display); line-height: 1.15; }
.title { background-image: var(--title-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; }
label { display: block; font-weight: 600; margin: 0 0 6px; }
input[type="email"], input[type="text"], input[type="password"] {
  width: 100%; min-height: 48px; padding: 10px 16px; font: inherit; font-size: 16px; color: var(--text);
  background: var(--input); border: 1px solid var(--line); border-radius: 14px;
}
input:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
/* Button rigor: one shape, one height, one weight; flat fills; visible focus; clear pressed and disabled states. */
.button, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; border-radius: 999px; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .15s ease, transform .1s ease; }
.button.primary, button.primary { background: var(--primary); color: var(--on-primary); }
.button.primary:hover, button.primary:hover { background: var(--primary-hover); }
.button.secondary, button.secondary { background: var(--secondary-bg); color: var(--secondary-text); border-color: var(--secondary-border); }
.button.secondary:hover, button.secondary:hover { background: var(--secondary-bg-hover); }
.button:active, button:active { transform: translateY(1px); }
.button:focus-visible, button:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.wide { width: 100%; }
.pill { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); }
.narrow { max-width: 26rem; margin: 0 auto; padding: 12vh 20px 40px; }
/* Theme switch (Auto / Day / Night): one round icon button, same on every Bhaashi page. */
.theme-toggle { min-height: 40px; width: 40px; padding: 0; border-radius: 999px; font-size: 18px; line-height: 1; background: var(--secondary-bg); color: var(--secondary-text); border: 1px solid var(--secondary-border); }
.theme-toggle:hover { background: var(--secondary-bg-hover); }
.theme-corner { position: fixed; top: 14px; right: 14px; }