/* 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. */

/* 2.7.1: the safe areas in one place (web/viewport.js explains the iPhone cases). The top is the
   status bar / notch when the page draws under it (an iPhone home-screen icon added before 2.7.1,
   the iPhone and Android apps); the native Windows/Mac apps use their own title bar strip
   (--titlebar), so no top inset there. A short iPhone home-screen view ends above the home
   indicator, so no bottom inset there. */
:root {
  /* Phase 111 (TD1): Today's grid. The row floor keeps slots from jumping while the batch arrives. */
  --td-row: 132px;
  --td-gap: 14px;
  --td-sec-gap: 26px;
}
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
html.shell { --safe-t: 0px; }
html.ios-short-view { --safe-b: 0px; }

: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;
  /* PL2c (N32): a disabled button: grey text and a border, both ≥ 3:1 on the cards (ui-look.test). */
  --btn-off-fill: #1e1a29;
  --btn-off-text: #a39bb3;
  --btn-off-line: #7a7090;
  --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;
  /* Phase 99: board label colours (readable on dark cards); text on them is --text-1. */
  --lbl-red: #e2546a; --lbl-orange: #e98a3c; --lbl-yellow: #d9b23a; --lbl-green: #46b882; --lbl-teal: #33aeb0;
  --lbl-blue: #5b8def; --lbl-purple: #9b7bf0; --lbl-pink: #e070b8; --lbl-gray: #8a8596;
  --info: #8fb4ff;
  /* 2.18: "Update available" in the sidebar footer and the update window: amber at Night. */
  --update-accent: #f5b452;
  --update-soft: rgb(245 180 82 / .14);
  --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;
  --btn-off-fill: #f4eef1;
  --btn-off-text: #6e6479;
  --btn-off-line: #857a90;
  --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;
  /* Phase 99: board label colours (darker for light cards). */
  --lbl-red: #c0303a; --lbl-orange: #b85c12; --lbl-yellow: #8f6a00; --lbl-green: #1f7d55; --lbl-teal: #137577;
  --lbl-blue: #2f5fc4; --lbl-purple: #6b4bc4; --lbl-pink: #a8357f; --lbl-gray: #6b6676;
  --info: #2f5fc4;
  /* 2.18: "Update available": blue by Day (5.9:1 on the light surfaces). */
  --update-accent: #2456c0;
  --update-soft: rgb(36 86 192 / .10);
  --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). */
/* 2.8: the same mood colours light her halo on Today and her face in the chat header. */
.hp-glow[data-mood="happy"], .td-face-btn[data-mood="happy"], .head-face-btn[data-mood="happy"] { --mood-a: #f5b452; --mood-b: #e0607e; }
.hp-glow[data-mood="caring"], .td-face-btn[data-mood="caring"], .head-face-btn[data-mood="caring"] { --mood-a: #e0607e; --mood-b: #f08aa5; }
.hp-glow[data-mood="playful"], .td-face-btn[data-mood="playful"], .head-face-btn[data-mood="playful"] { --mood-a: #ff6bb5; --mood-b: #9b6bff; }
.hp-glow[data-mood="sleepy"], .td-face-btn[data-mood="sleepy"], .head-face-btn[data-mood="sleepy"] { --mood-a: #9b6bff; --mood-b: #5f73e6; }
.hp-glow[data-mood="hurt"], .td-face-btn[data-mood="hurt"], .head-face-btn[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%); }

/* ---------- 2.8 polish pass (docs/design/NEW_LOOK.md → "Polish pass"; drawn in web/polish.css) ----------
   The aurora behind the glass, layered glass with an inner top highlight, one elevation scale, the
   display serif, her mood halo, the weather art and the small rings and sparklines. Night first, then
   Day (lighter aurora, hairlines instead of deep shadows). Text pairs are unchanged, so AA holds. */
:root {
  /* A display serif for the greeting, window titles and big numbers (system fonts only). */
  --font-display: "New York", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --tracking-display: -0.012em;
  /* Masks for gradient borders and her halo (mask images need a solid colour; it never shows). */
  --mask-solid: linear-gradient(#000 0 0);
  --halo-mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  /* A very fine film grain over the aurora (an SVG noise picture, drawn once, never animated). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --aurora-speed: 1;
}
:root,
:root[data-theme="dark"] {
  /* The aurora: plum, rose and violet light drifting slowly behind everything. */
  --aurora-base: radial-gradient(140% 90% at 50% 0%, #1a1426 0%, #0f0d17 60%);
  --aurora-1: rgb(224 96 126 / .34);
  --aurora-2: rgb(155 107 255 / .30);
  --aurora-3: rgb(150 70 150 / .30);
  --grain-opacity: .05;
  /* Glass: a see-through fill, a light top edge fading into a hairline, a soft shadow below. */
  --glass-fill: linear-gradient(165deg, rgb(44 37 60 / .74), rgb(25 21 35 / .70) 70%);
  --glass-fill-strong: linear-gradient(165deg, rgb(40 34 55 / .92), rgb(24 20 33 / .9) 70%);
  --glass-edge: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / .07) 32%, rgb(255 255 255 / .04) 70%, rgb(255 255 255 / .07));
  --glass-hi: inset 0 1px 0 rgb(255 255 255 / .07);
  --glass-tint: rgb(255 255 255 / .03);
  /* Elevation: 1 cards and tiles, 2 floating bars and popovers, 3 windows and sheets. */
  --elev-1: 0 1px 2px rgb(0 0 0 / .22), 0 10px 28px -12px rgb(0 0 0 / .55);
  --elev-2: 0 2px 6px rgb(0 0 0 / .28), 0 18px 44px -14px rgb(0 0 0 / .62), 0 20px 50px -30px var(--accent-glow);
  --elev-3: 0 4px 14px rgb(0 0 0 / .32), 0 34px 80px -24px rgb(0 0 0 / .7), 0 30px 90px -40px var(--violet-glow);
  --lift: 0 2px 6px rgb(0 0 0 / .26), 0 18px 40px -14px rgb(0 0 0 / .6), 0 14px 36px -22px var(--accent-glow);
  --btn-glow: 0 8px 22px -8px var(--accent-glow), 0 4px 18px -10px var(--violet-glow);
  /* The phone's floating bar and its lit place. */
  --bbar-fill: linear-gradient(180deg, rgb(46 39 62 / .86), rgb(26 22 36 / .9));
  --bbar-lit: radial-gradient(60% 90% at 50% 100%, rgb(224 96 126 / .42), rgb(155 107 255 / .16) 60%, transparent 75%);
  /* Weather art. */
  --wx-sun-a: #ffd98a;
  --wx-sun-b: #f59f4f;
  --wx-glow-a: rgb(255 200 120 / .55);
  --wx-glow-b: rgb(255 170 120 / 0);
  --wx-moon-a: #fff4dc;
  --wx-moon-b: #e3c99a;
  --wx-cloud-a: #f6f2fb;
  --wx-cloud-b: #c8bedb;
  --wx-back-a: #a99dbf;
  --wx-back-b: #786d8f;
  --wx-cloud-line: rgb(255 255 255 / 0);
  --wx-rain: #8fb4ff;
  --wx-snow: #e9f0ff;
  --wx-bolt: #ffcf5a;
  --wx-fog: #b6adc8;
  --wx-star: #fff3cf;
  /* Sparklines and rings. */
  --spark-line: #f08aa5;
  --spark-a: rgb(240 138 165 / .32);
  --spark-b: rgb(155 107 255 / 0);
}
:root[data-theme="light"] {
  --aurora-base: radial-gradient(140% 90% at 50% 0%, #fdf6f6 0%, #faf7f5 60%);
  --aurora-1: rgb(240 140 170 / .22);
  --aurora-2: rgb(170 140 255 / .2);
  --aurora-3: rgb(250 190 170 / .22);
  --grain-opacity: .035;
  --glass-fill: linear-gradient(165deg, rgb(255 255 255 / .82), rgb(255 255 255 / .7) 70%);
  --glass-fill-strong: linear-gradient(165deg, rgb(255 255 255 / .96), rgb(252 249 251 / .94) 70%);
  --glass-edge: linear-gradient(180deg, rgb(255 255 255 / 1), rgb(46 22 54 / .1) 30%, rgb(46 22 54 / .12));
  --glass-hi: inset 0 1px 0 rgb(255 255 255 / .9);
  --glass-tint: rgb(255 255 255 / .4);
  --elev-1: 0 0 0 1px rgb(46 22 54 / .02), 0 1px 2px rgb(60 30 70 / .05), 0 8px 22px -12px rgb(60 30 70 / .14);
  --elev-2: 0 1px 3px rgb(60 30 70 / .07), 0 16px 36px -16px rgb(60 30 70 / .2);
  --elev-3: 0 2px 8px rgb(60 30 70 / .08), 0 30px 70px -26px rgb(60 30 70 / .26);
  --lift: 0 2px 6px rgb(60 30 70 / .07), 0 18px 36px -16px rgb(60 30 70 / .22), 0 12px 30px -22px var(--accent-glow);
  --btn-glow: 0 8px 20px -8px rgb(194 76 116 / .45);
  --bbar-fill: linear-gradient(180deg, rgb(255 255 255 / .92), rgb(250 245 248 / .94));
  --bbar-lit: radial-gradient(60% 90% at 50% 100%, rgb(224 96 126 / .22), rgb(155 107 255 / .08) 60%, transparent 75%);
  --wx-sun-a: #ffc65c;
  --wx-sun-b: #ef8a3a;
  --wx-glow-a: rgb(255 190 100 / .45);
  --wx-moon-a: #f2cf7e;
  --wx-moon-b: #c48f35;
  --wx-cloud-a: #ffffff;
  --wx-cloud-b: #dcd3ea;
  --wx-back-a: #cfc5df;
  --wx-back-b: #a99bc2;
  --wx-cloud-line: rgb(90 60 120 / .22);
  --wx-rain: #3d6fd6;
  --wx-snow: #7d9ad6;
  --wx-bolt: #e8a21a;
  --wx-fog: #9a90ad;
  --wx-star: #d6a94b;
  --spark-line: #b8436a;
  --spark-a: rgb(184 67 106 / .2);
  --spark-b: rgb(155 107 255 / 0);
}
/* Less see-through when the system asks for it (or the device saves power): solid surfaces, no blur. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-filter: none; --glass: var(--surface-2); --glass-strong: var(--surface-2); --glass-fill: linear-gradient(var(--surface-2), var(--surface-1)); --bbar-fill: linear-gradient(var(--surface-2), var(--surface-2)); }
}