/* Phase 75: the design tokens of the new look (docs/design/NEW_LOOK.md → Visual language).
   One place for colours, shapes, spacing and motion. Night is the default; Day is the light theme
   (html[data-theme="light"], set before anything draws by web/theme-boot.js). style.css and
   ui-tidy.css map their older variables (--bg, --panel, --text, --accent…) onto these, so every
   screen follows the theme. Contrast: every text pair below meets WCAG AA (4.5:1) on the
   surfaces it is used on; muted text is checked against the raised surfaces too. */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Surfaces: deep plum-navy, raised panels, frosted glass. */
  --surface-0: #0f0d17;
  --surface-1: #17141f;
  --surface-2: #1e1a29;
  --surface-3: #282236;
  --glass: rgb(30 26 41 / .72);
  --glass-strong: rgb(30 26 41 / .9);
  --glass-filter: blur(18px) saturate(140%);
  --hairline: rgb(255 255 255 / .08);
  --hairline-strong: rgb(255 255 255 / .14);
  --line: #2f2939;
  /* Text: primary 15.9:1, secondary 7.6:1 and tertiary 4.9:1 on --surface-0 (4.5:1+ on --surface-2). */
  --text-1: #f1edf7;
  --text-2: #aea6bd;
  --text-3: #8e86a0;
  /* Accent: rose → violet, used sparingly (send, her glow, the active place, progress). */
  --accent-from: #e0607e;
  --accent-to: #9b6bff;
  --accent-grad: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  --accent-solid: #e0607e;
  --accent-text: #f08aa5;
  --accent-soft: rgb(224 96 126 / .14);
  --accent-glow: rgb(224 96 126 / .45);
  --violet-glow: rgb(155 107 255 / .35);
  /* Your messages: a compact deep gradient so white text stays at 5:1+. */
  --mine-grad: linear-gradient(135deg, #a8456d, #6d48c4);
  --on-mine: #ffffff;
  --on-accent: #1a0f14;
  --success: #4fd1a5;
  --warn: #f5b452;
  --danger: #ff6b7d;
  --success-soft: rgb(79 209 165 / .13);
  --warn-soft: rgb(245 180 82 / .13);
  --danger-soft: rgb(255 107 125 / .13);
  /* Depth: glow edges in the dark. */
  --shadow-1: 0 1px 0 rgb(255 255 255 / .04) inset, 0 6px 24px rgb(0 0 0 / .35);
  --shadow-2: 0 1px 0 rgb(255 255 255 / .05) inset, 0 18px 48px rgb(0 0 0 / .5);
  --glow-edge: 0 1px 0 rgb(255 255 255 / .05) inset, 0 14px 36px -22px var(--accent-glow), 0 8px 24px -16px rgb(0 0 0 / .6);
  --page-glow: radial-gradient(1200px 600px at 70% -10%, rgb(155 107 255 / .10), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgb(224 96 126 / .08), transparent 60%);
  /* Stage 3: the rest of the palette as tokens (every screen, no colours of their own). */
  --scrim: rgb(8 6 14 / .55);
  --scrim-soft: rgb(8 6 14 / .38);
  --shadow-up: 0 -18px 48px rgb(0 0 0 / .45);
  --danger-fill: #b3383d;
  --on-danger: #ffffff;
  --info: #8fb4ff;
  --spk-0: #f08aa5;
  --spk-1: #7fa8ff;
  --spk-2: #4fd1a5;
  --spk-3: #f5b452;
  /* Ink that stays light on photos, the call screen and the lightbox (always dark there). */
  --on-photo: #ffffff;
  --photo-scrim: rgb(0 0 0 / .45);
  --photo-scrim-strong: rgb(0 0 0 / .65);
  --call-bg: #08070a;
  --call-glass: rgb(255 255 255 / .12);
  --call-glass-strong: rgb(255 255 255 / .88);
  --call-line: rgb(255 255 255 / .24);
  --call-text-2: rgb(255 255 255 / .7);
  --call-live: #ff5a6e;
  --call-end: #d43a4f;
  --call-answer: #2e9e5b;
  --call-decline: #c94848;
  --call-video: #3a6fd8;
  /* A QR code and a web app preview need a white page whatever the theme. */
  --paper: #ffffff;
  --sparkle: #ffffff;
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-0: #faf7f5;
  --surface-1: #ffffff;
  --surface-2: #f4eef1;
  --surface-3: #ebe2ea;
  --glass: rgb(255 255 255 / .74);
  --glass-strong: rgb(255 255 255 / .92);
  --hairline: rgb(46 22 54 / .09);
  --hairline-strong: rgb(46 22 54 / .16);
  --line: #e2d8e0;
  /* Primary 15.6:1, secondary 6.6:1, tertiary 4.7:1 on --surface-0. */
  --text-1: #221a2a;
  --text-2: #5e5469;
  --text-3: #736a7e;
  --accent-solid: #c24c74;
  --accent-text: #b8436a;
  --accent-soft: rgb(194 76 116 / .10);
  --accent-glow: rgb(224 96 126 / .32);
  --violet-glow: rgb(155 107 255 / .22);
  --mine-grad: linear-gradient(135deg, #b8436a, #7a50d2);
  --on-accent: #ffffff;
  --success: #17805d;
  --warn: #92600c;
  --danger: #c0303a;
  --success-soft: rgb(23 128 93 / .10);
  --warn-soft: rgb(146 96 12 / .10);
  --danger-soft: rgb(192 48 58 / .09);
  /* Depth: soft shadows in the light. */
  --shadow-1: 0 1px 2px rgb(60 30 70 / .06), 0 6px 20px rgb(60 30 70 / .07);
  --shadow-2: 0 2px 6px rgb(60 30 70 / .08), 0 18px 44px rgb(60 30 70 / .14);
  --glow-edge: 0 1px 2px rgb(60 30 70 / .05), 0 12px 30px -18px var(--accent-glow);
  --page-glow: radial-gradient(1200px 600px at 70% -10%, rgb(155 107 255 / .07), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgb(224 96 126 / .06), transparent 60%);
  --scrim: rgb(40 20 50 / .2);
  --scrim-soft: rgb(40 20 50 / .14);
  --shadow-up: 0 -12px 40px rgb(60 30 70 / .16);
  --danger-fill: #b42a3a;
  --info: #2f5fc4;
  --spk-0: #b8436a;
  --spk-1: #2f5fc4;
  --spk-2: #17805d;
  --spk-3: #92600c;
}

:root {
  /* Type */
  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-body: 15px;
  --fs-meta: 13px;
  --fs-small: 12px;
  --tracking-tight: -0.011em;
  /* Shape */
  --r-card: 14px;
  --r-control: 10px;
  --r-pill: 999px;
  /* Spacing: a 4 px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --tap: 44px;
  /* Motion: 150-250 ms ease-out; her glow breathes slowly */
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --breathe: 4.8s;
  /* The native apps' title strip (web/theme-boot.js sets it from window.saraShell). */
  --titlebar: 0px;
}

/* Reduced motion: no glow breathing, no step fade-ins, no slides. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Stage 3: primary buttons (the deep rose → violet of your messages, white text at 5:1+). A picked
   accent colour (Settings → Look → Accent) fills them instead, with its own text colour. */
:root { --btn-fill: var(--mine-grad); --on-btn: var(--on-mine); }

/* The accent colours you can pick, and their swatches. */
:root[data-accent="lavender"] { --accent: #a78bfa; --accent-2: #c4b5fd; --on-accent: #160f26; --btn-fill: var(--accent); --on-btn: var(--on-accent); }
:root[data-accent="ocean"] { --accent: #4fb3d9; --accent-2: #8fd3ec; --on-accent: #06171e; --btn-fill: var(--accent); --on-btn: var(--on-accent); }
:root[data-accent="forest"] { --accent: #5fbf8a; --accent-2: #93dbb2; --on-accent: #07190f; --btn-fill: var(--accent); --on-btn: var(--on-accent); }
:root[data-accent="amber"] { --accent: #e8a948; --accent-2: #f3c886; --on-accent: #1e1405; --btn-fill: var(--accent); --on-btn: var(--on-accent); }
:root[data-accent="mono"] { --accent: #c9c4d0; --accent-2: #e6e2ea; --on-accent: #141217; --btn-fill: var(--accent); --on-btn: var(--on-accent); }
:root[data-theme="light"][data-accent="lavender"] { --accent: #7c5cd6; --accent-2: #6643c4; --on-accent: #fff; --btn-fill: var(--accent); --on-btn: var(--on-accent); }
:root[data-theme="light"][data-accent="ocean"] { --accent: #1f7fa8; --accent-2: #17698c; --on-accent: #fff; --btn-fill: var(--accent); --on-btn: var(--on-accent); }
:root[data-theme="light"][data-accent="forest"] { --accent: #2f8a57; --accent-2: #246f45; --on-accent: #fff; --btn-fill: var(--accent); --on-btn: var(--on-accent); }
:root[data-theme="light"][data-accent="amber"] { --accent: #b9761a; --accent-2: #9a6213; --on-accent: #fff; --btn-fill: var(--accent); --on-btn: var(--on-accent); }
:root[data-theme="light"][data-accent="mono"] { --accent: #4a4452; --accent-2: #2f2a35; --on-accent: #fff; --btn-fill: var(--accent); --on-btn: var(--on-accent); }
.ap-swatch[data-accent="lavender"] { background: #a78bfa; }
.ap-swatch[data-accent="ocean"] { background: #4fb3d9; }
.ap-swatch[data-accent="forest"] { background: #5fbf8a; }
.ap-swatch[data-accent="amber"] { background: #e8a948; }
.ap-swatch[data-accent="mono"] { background: #c9c4d0; }

/* Her glow's colours by mood (her panel and Today). */
.hp-glow[data-mood="happy"] { --mood-a: #f5b452; --mood-b: #e0607e; }
.hp-glow[data-mood="caring"] { --mood-a: #e0607e; --mood-b: #f08aa5; }
.hp-glow[data-mood="playful"] { --mood-a: #ff6bb5; --mood-b: #9b6bff; }
.hp-glow[data-mood="sleepy"] { --mood-a: #9b6bff; --mood-b: #5f73e6; }
.hp-glow[data-mood="hurt"] { --mood-a: #7d89c9; --mood-b: #9b6bff; }

/* The chat background "Night sky". */
:root[data-chatbg="stars"] #messages {
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 60%), radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 62%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 88% 48%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 22% 82%, rgba(255,255,255,.35), transparent 60%), radial-gradient(1.5px 1.5px at 60% 30%, rgba(255,255,255,.3), transparent 60%),
    linear-gradient(180deg, #0d1022 0%, #15122a 60%, var(--bg) 100%);
  background-attachment: local;
}
:root[data-theme="light"][data-chatbg="stars"] #messages { background: linear-gradient(180deg, #e8e6f6 0%, var(--bg) 80%); }