/* Zenithy landing — design tokens (copied from prototypes/website-lab/shared/tokens.css; font paths adapted)
 * status: complete
 *
 * GENERATED by a script (see shared/README.md) from lib/theme.dart + docs/research/BRIEF.md §5.
 * Rose is the hand-tuned palette, verbatim. Every other seed is derived here with
 * relative OKLCH from one hex: neutrals take the seed hue at rose's lightness and
 * chroma, accents keep rose's accent relationships, domain colours rotate ≤20° towards
 * the seed (semantic red/green/amber never move). All text pairs are AA-checked.
 *
 * Usage:  <html data-theme="light|dark" data-seed="rose|ember|olive|fern|teal|sky|indigo|orchid">
 *   - no data-theme → follows prefers-color-scheme; no data-seed → rose.
 *   - both attributes nest freely (a dark section inside a teal page stays teal).
 *   - never put white text on --accent: use --accent-soft + --accent-ink, or --on-accent.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('../fonts/GoogleSansFlex-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('../fonts/MaterialSymbolsRounded-subset.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}

/* ── Registered colour tokens: they compute to real colours (canvas can read
 *    them) and can transition when the theme or seed changes. ──────────── */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #FBF3EC; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: #F6E1D3; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --surface2 { syntax: '<color>'; inherits: true; initial-value: #FDF5EE; }
@property --surface3 { syntax: '<color>'; inherits: true; initial-value: #F7ECDF; }
@property --inset { syntax: '<color>'; inherits: true; initial-value: #F0E4D6; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #F1E3D4; }
@property --line2 { syntax: '<color>'; inherits: true; initial-value: #E7D6C3; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #5B4232; }
@property --ink2 { syntax: '<color>'; inherits: true; initial-value: #8D7160; }
@property --ink3 { syntax: '<color>'; inherits: true; initial-value: #B69B86; }
@property --ink4 { syntax: '<color>'; inherits: true; initial-value: #D4C0AD; }
@property --ink-muted { syntax: '<color>'; inherits: true; initial-value: #795E4D; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #EC6A8C; }
@property --accent2 { syntax: '<color>'; inherits: true; initial-value: #A07CE0; }
@property --accent-soft { syntax: '<color>'; inherits: true; initial-value: #FBE4EA; }
@property --accent-ink { syntax: '<color>'; inherits: true; initial-value: #8E2C47; }
@property --on-accent { syntax: '<color>'; inherits: true; initial-value: #491826; }
@property --shadow-c { syntax: '<color>'; inherits: true; initial-value: #965A3C; }
@property --career { syntax: '<color>'; inherits: true; initial-value: #A07CE0; }
@property --career-soft { syntax: '<color>'; inherits: true; initial-value: #ECE0F7; }
@property --career-ink { syntax: '<color>'; inherits: true; initial-value: #5A3A8A; }
@property --health { syntax: '<color>'; inherits: true; initial-value: #5FB87A; }
@property --health-soft { syntax: '<color>'; inherits: true; initial-value: #DFF1E2; }
@property --health-ink { syntax: '<color>'; inherits: true; initial-value: #2F6B46; }
@property --learning { syntax: '<color>'; inherits: true; initial-value: #E8A24A; }
@property --learning-soft { syntax: '<color>'; inherits: true; initial-value: #FBE9D4; }
@property --learning-ink { syntax: '<color>'; inherits: true; initial-value: #8A5A17; }
@property --money { syntax: '<color>'; inherits: true; initial-value: #5FA8D8; }
@property --money-soft { syntax: '<color>'; inherits: true; initial-value: #D9EDF7; }
@property --money-ink { syntax: '<color>'; inherits: true; initial-value: #2A5E7A; }
@property --red { syntax: '<color>'; inherits: true; initial-value: #E06A6A; }
@property --red-soft { syntax: '<color>'; inherits: true; initial-value: #F9E0E0; }
@property --red-ink { syntax: '<color>'; inherits: true; initial-value: #8A3838; }
@property --green { syntax: '<color>'; inherits: true; initial-value: #5FB87A; }
@property --green-soft { syntax: '<color>'; inherits: true; initial-value: #DFF1E2; }
@property --green-ink { syntax: '<color>'; inherits: true; initial-value: #2F6B46; }
@property --amber { syntax: '<color>'; inherits: true; initial-value: #E8A24A; }
@property --amber-soft { syntax: '<color>'; inherits: true; initial-value: #FBE9D4; }
@property --amber-ink { syntax: '<color>'; inherits: true; initial-value: #8A5A17; }

/* ── Static tokens ───────────────────────────────────────────────────── */
:root {
  /* Type — Google Sans Flex (wght, ROND 0–100, wdth, opsz). M3 Expressive emphasised
     weights: 500 display/headline/title-l, 700 title-m/s + labels. Tracking 0 or
     positive; only display-l is −0.2. ROND per role from lib/desktop/theme.dart. */
  --font: 'Google Sans Flex', 'Roboto Flex', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-icon: 'Material Symbols Rounded';
  --fs-hero: clamp(3rem, 1.5rem + 6.2vw, 8.5rem); --lh-hero: 1.02; --ls-hero: -0.2px; --fw-hero: 500; --rond-hero: 100;
  --fs-display-l: clamp(2.75rem, 2rem + 3.2vw, 4.5rem); --lh-display-l: 1.1; --ls-display-l: -0.2px; --fw-display-l: 500; --rond-display-l: 100;
  --fs-display-m: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem); --lh-display-m: 1.14; --ls-display-m: 0px; --fw-display-m: 500; --rond-display-m: 100;
  --fs-display-s: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem); --lh-display-s: 1.2; --ls-display-s: 0px; --fw-display-s: 500; --rond-display-s: 100;
  --fs-headline-l: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem); --lh-headline-l: 1.25; --ls-headline-l: 0px; --fw-headline-l: 500; --rond-headline-l: 100;
  --fs-headline-m: clamp(1.5rem, 1.35rem + 0.55vw, 1.875rem); --lh-headline-m: 1.28; --ls-headline-m: 0px; --fw-headline-m: 500; --rond-headline-m: 100;
  --fs-headline-s: 1.5rem; --lh-headline-s: 1.33; --ls-headline-s: 0px; --fw-headline-s: 500; --rond-headline-s: 100;
  --fs-title-l: 1.375rem; --lh-title-l: 1.27; --ls-title-l: 0px; --fw-title-l: 500; --rond-title-l: 80;
  --fs-title-m: 1rem; --lh-title-m: 1.5; --ls-title-m: 0.15px; --fw-title-m: 700; --rond-title-m: 60;
  --fs-title-s: 0.875rem; --lh-title-s: 1.43; --ls-title-s: 0.1px; --fw-title-s: 700; --rond-title-s: 60;
  --fs-body-l: 1rem; --lh-body-l: 1.5; --ls-body-l: 0.5px; --fw-body-l: 400; --rond-body-l: 30;
  --fs-body-m: 0.875rem; --lh-body-m: 1.43; --ls-body-m: 0.25px; --fw-body-m: 400; --rond-body-m: 30;
  --fs-body-s: 0.75rem; --lh-body-s: 1.33; --ls-body-s: 0.4px; --fw-body-s: 400; --rond-body-s: 30;
  --fs-label-l: 0.875rem; --lh-label-l: 1.43; --ls-label-l: 0.1px; --fw-label-l: 700; --rond-label-l: 60;
  --fs-label-m: 0.75rem; --lh-label-m: 1.33; --ls-label-m: 0.5px; --fw-label-m: 700; --rond-label-m: 60;
  --fs-label-s: 0.6875rem; --lh-label-s: 1.45; --ls-label-s: 0.5px; --fw-label-s: 700; --rond-label-s: 60;
  --lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem); /* marketing intro paragraph */

  /* Shape — M3E scale 4/8/12/16/20/28/32/48/full, plus the app's 44 hero. */
  --r-4: 4px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-28: 28px;
  --r-32: 32px;
  --r-48: 48px;
  --r-hero: 44px;
  --r-full: 9999px;
  --r-card: var(--r-28); --r-card-sm: var(--r-20); --r-field: var(--r-16); --r-chip: var(--r-full); --r-button: var(--r-full);
  --r-press: var(--r-12); /* corner a pill morphs to while pressed (M3E pressed shape) */

  /* Spacing — 4 px grid. */
  --s-0_5: 2px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --gutter: clamp(20px, 4vw + 4px, 64px);
  --section-y: clamp(72px, 9vw + 36px, 176px);
  --maxw: 1200px; --maxw-text: 68ch; --maxw-wide: 1360px;
  --tap: 48px; /* minimum touch target */

  /* Motion — M3 Expressive springs (mass 1), as CSS linear() + settle time.
     spatial* overshoot: position, size, shape. effects* never overshoot: colour, opacity.
     motion.js solves the same springs exactly at runtime. */
  --dur-spatial: 528ms; /* stiffness 380, damping ratio 0.8 */
  --dur-spatial-fast: 416ms; /* stiffness 800, damping ratio 0.6 */
  --dur-spatial-slow: 724ms; /* stiffness 200, damping ratio 0.8 */
  --dur-effects: 332ms; /* stiffness 1600, damping ratio 1.0 */
  --dur-effects-fast: 224ms; /* stiffness 3800, damping ratio 1.0 */
  --dur-effects-slow: 456ms; /* stiffness 800, damping ratio 1.0 */
  --ease-spatial: linear(0, 0.0288, 0.1004, 0.1963, 0.3033, 0.4117, 0.5153, 0.6101, 0.694, 0.7661, 0.8264, 0.8758, 0.9152, 0.9459, 0.9692, 0.9862, 0.9983, 1.0064, 1.0114, 1.0141, 1.0151, 1.015, 1.0141, 1.0127, 1.0111, 1.0095, 1.0079, 1.0064, 1.0051, 1.0039, 1.0029, 1.0021, 1.0015, 1.001, 1.0006, 1.0003, 1.0001, 0.9999, 0.9998, 0.9998, 1);
  --ease-spatial-fast: linear(0, 0.0383, 0.1349, 0.2653, 0.4101, 0.5546, 0.6883, 0.8048, 0.9008, 0.9754, 1.0296, 1.0656, 1.0861, 1.0943, 1.0932, 1.0857, 1.0742, 1.0608, 1.0469, 1.0338, 1.0222, 1.0124, 1.0046, 0.9988, 0.9948, 0.9924, 0.9912, 0.9911, 0.9916, 0.9926, 0.9938, 0.9951, 0.9964, 0.9975, 0.9985, 0.9993, 0.9999, 1.0004, 1.0007, 1.0008, 1);
  --ease-spatial-slow: linear(0, 0.0286, 0.0995, 0.1947, 0.301, 0.4089, 0.5122, 0.6069, 0.6907, 0.7629, 0.8236, 0.8733, 0.913, 0.9441, 0.9677, 0.9851, 0.9974, 1.0058, 1.011, 1.0139, 1.0151, 1.015, 1.0142, 1.0129, 1.0113, 1.0097, 1.0081, 1.0066, 1.0052, 1.0041, 1.0031, 1.0022, 1.0016, 1.001, 1.0006, 1.0003, 1.0001, 1, 0.9999, 0.9998, 1);
  --ease-effects: linear(0, 0.0443, 0.1434, 0.2628, 0.3831, 0.4942, 0.5918, 0.6746, 0.7432, 0.7991, 0.8438, 0.8793, 0.9072, 0.929, 0.9459, 0.9589, 0.9689, 0.9765, 0.9823, 0.9867, 0.99, 0.9925, 0.9944, 0.9958, 0.9969, 0.9977, 0.9983, 0.9987, 0.9991, 0.9993, 0.9995, 0.9996, 0.9997, 0.9998, 0.9998, 0.9999, 0.9999, 0.9999, 1, 1, 1);
  --ease-effects-fast: linear(0, 0.0475, 0.1525, 0.2773, 0.4015, 0.5148, 0.6129, 0.6951, 0.7623, 0.8163, 0.859, 0.8924, 0.9183, 0.9383, 0.9536, 0.9652, 0.974, 0.9806, 0.9856, 0.9893, 0.9921, 0.9941, 0.9957, 0.9968, 0.9977, 0.9983, 0.9987, 0.9991, 0.9993, 0.9995, 0.9996, 0.9997, 0.9998, 0.9999, 0.9999, 0.9999, 0.9999, 1, 1, 1, 1);
  --ease-effects-slow: linear(0, 0.0421, 0.1369, 0.2522, 0.3695, 0.479, 0.576, 0.6591, 0.7286, 0.7857, 0.832, 0.869, 0.8984, 0.9215, 0.9396, 0.9537, 0.9646, 0.973, 0.9795, 0.9844, 0.9882, 0.9911, 0.9933, 0.9949, 0.9962, 0.9971, 0.9979, 0.9984, 0.9988, 0.9991, 0.9993, 0.9995, 0.9996, 0.9997, 0.9998, 0.9998, 0.9999, 0.9999, 0.9999, 1, 1);
  --theme-dur: var(--dur-effects-slow);

  /* Fixed colours */
  --now: #FF3B30;            /* calendar now-line */
  --tt-theory: #00A1D1; --tt-practice: #58A741; --tt-lab: #E67620; /* timetable demo */
  --logo-1: #F2D8DF; --logo-2: #D48FA2; --logo-3: #B97589; --logo-4: #8F5566; /* logo facets, pale → deep */

  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 500; --z-toast: 800; --z-top: 1000;
}

/* ── 1. Theme: rose literals + recipes ─────────────────────────────────── */
:root,
[data-theme="light"] {
  color-scheme: light;
  --is-light: ; --is-dark: initial;
  /* rose, hand-tuned (lib/theme.dart SoftPastel.light) */
  --p-bg: #FBF3EC;
  --p-glow: #F6E1D3;
  --p-surface: #FFFFFF;
  --p-surface2: #FDF5EE;
  --p-surface3: #F7ECDF;
  --p-inset: #F0E4D6;
  --p-line: #F1E3D4;
  --p-line2: #E7D6C3;
  --p-ink: #5B4232;
  --p-ink2: #8D7160;
  --p-ink3: #B69B86;
  --p-ink4: #D4C0AD;
  --p-ink-muted: #795E4D;
  --p-accent: #EC6A8C;
  --p-accent2: #A07CE0;
  --p-accent-soft: #FBE4EA;
  --p-accent-ink: #8E2C47;
  --p-on-accent: #491826;
  --p-shadow-c: #965A3C;
  --p-career: #A07CE0; --p-career-soft: #ECE0F7; --p-career-ink: #5A3A8A;
  --p-health: #5FB87A; --p-health-soft: #DFF1E2; --p-health-ink: #2F6B46;
  --p-learning: #E8A24A; --p-learning-soft: #FBE9D4; --p-learning-ink: #8A5A17;
  --p-money: #5FA8D8; --p-money-soft: #D9EDF7; --p-money-ink: #2A5E7A;
  /* semantic triads: never seed-dependent */
  --red: #E06A6A; --red-soft: #F9E0E0; --red-ink: #8A3838;
  --green: #5FB87A; --green-soft: #DFF1E2; --green-ink: #2F6B46;
  --amber: #E8A24A; --amber-soft: #FBE9D4; --amber-ink: #8A5A17;
  /* recipes for derived seeds, measured off rose: L C (abs) or dL kC dH (rel) */
  --n-bg-l: 0.9684; --n-bg-c: 0.0127;
  --n-glow-l: 0.923; --n-glow-c: 0.0298;
  --n-surface-l: 0.994; --n-surface-c: 0.0035;
  --n-surface2-l: 0.9744; --n-surface2-c: 0.0127;
  --n-surface3-l: 0.9482; --n-surface3-c: 0.021;
  --n-inset-l: 0.9246; --n-inset-c: 0.0229;
  --n-line-l: 0.923; --n-line-c: 0.0253;
  --n-line2-l: 0.8848; --n-line2-c: 0.0318;
  --n-ink-l: 0.4022; --n-ink-c: 0.0432;
  --n-ink2-l: 0.5711; --n-ink2-c: 0.0436;
  --n-ink3-l: 0.708; --n-ink3-c: 0.0437;
  --n-ink4-l: 0.8194; --n-ink4-c: 0.0346;
  --n-ink-muted-l: 0.5046; --n-ink-muted-c: 0.0439;
  --n-accent-dl: 0; --n-accent-kc: 1; --n-accent-dh: 0;
  --n-accent2-dl: -0.0281; --n-accent2-kc: 0.9048; --n-accent2-dh: -67.06;
  --n-accent-soft-l: 0.9391; --n-accent-soft-c: 0.0263;
  --n-accent-ink-l: 0.4482; --n-accent-ink-c: 0.1332;
  --n-on-accent-l: 0.2904; --n-on-accent-c: 0.076;
  --n-shadow-c-l: 0.4022; --n-shadow-c-c: 0.0432;
  --shadow-a1: 6%; --shadow-a2: 8%; --shadow-a3: 16%;
}
[data-theme="dark"] {
  color-scheme: dark;
  --is-light: initial; --is-dark: ;
  /* rose, hand-tuned (lib/theme.dart SoftPastel.dark) */
  --p-bg: #1B1518;
  --p-glow: #2A1D22;
  --p-surface: #271F23;
  --p-surface2: #2F262A;
  --p-surface3: #382D31;
  --p-inset: #3A2F33;
  --p-line: #3A2F33;
  --p-line2: #463A3E;
  --p-ink: #F7ECE2;
  --p-ink2: #CDB8A8;
  --p-ink3: #9A8474;
  --p-ink4: #6E5D52;
  --p-ink-muted: #CDB8A8;
  --p-accent: #F08AA6;
  --p-accent2: #B89CF0;
  --p-accent-soft: #3D2A30;
  --p-accent-ink: #F8B9CA;
  --p-on-accent: #1B1518;
  --p-shadow-c: #000000;
  --p-career: #B89CF0; --p-career-soft: #2A2333; --p-career-ink: #C9B0F5;
  --p-health: #7AD49A; --p-health-soft: #22302A; --p-health-ink: #9EE2B6;
  --p-learning: #F0B566; --p-learning-soft: #302619; --p-learning-ink: #F0C98A;
  --p-money: #7CC2E8; --p-money-soft: #1F2D35; --p-money-ink: #A0D4EF;
  /* semantic triads: never seed-dependent */
  --red: #EE8585; --red-soft: #2F1F1F; --red-ink: #F0A0A0;
  --green: #7AD49A; --green-soft: #22302A; --green-ink: #9EE2B6;
  --amber: #F0B566; --amber-soft: #302619; --amber-ink: #F0C98A;
  /* recipes for derived seeds, measured off rose: L C (abs) or dL kC dH (rel) */
  --n-bg-l: 0.2043; --n-bg-c: 0.0112;
  --n-glow-l: 0.2487; --n-glow-c: 0.0221;
  --n-surface-l: 0.2502; --n-surface-c: 0.0142;
  --n-surface2-l: 0.2803; --n-surface2-c: 0.0151;
  --n-surface3-l: 0.3108; --n-surface3-c: 0.0174;
  --n-inset-l: 0.3188; --n-inset-c: 0.0173;
  --n-line-l: 0.3188; --n-line-c: 0.0173;
  --n-line2-l: 0.3626; --n-line2-c: 0.018;
  --n-ink-l: 0.949; --n-ink-c: 0.0179;
  --n-ink2-l: 0.796; --n-ink2-c: 0.0328;
  --n-ink3-l: 0.6291; --n-ink3-c: 0.0357;
  --n-ink4-l: 0.4917; --n-ink4-c: 0.0281;
  --n-ink-muted-l: 0.796; --n-ink-muted-c: 0.0328;
  --n-accent-dl: 0.0592; --n-accent-kc: 0.7805; --n-accent-dh: -3;
  --n-accent2-dl: 0.0585; --n-accent2-kc: 0.745; --n-accent2-dh: -67.22;
  --n-accent-soft-l: 0.3097; --n-accent-soft-c: 0.0298;
  --n-accent-ink-l: 0.848; --n-accent-ink-c: 0.0757;
  --n-on-accent-l: 0.2043; --n-on-accent-c: 0.0112;
  --n-shadow-c-l: 0; --n-shadow-c-c: 0;
  --shadow-a1: 30%; --shadow-a2: 40%; --shadow-a3: 50%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --is-light: initial; --is-dark: ;
    /* rose, hand-tuned (lib/theme.dart SoftPastel.dark) */
    --p-bg: #1B1518;
    --p-glow: #2A1D22;
    --p-surface: #271F23;
    --p-surface2: #2F262A;
    --p-surface3: #382D31;
    --p-inset: #3A2F33;
    --p-line: #3A2F33;
    --p-line2: #463A3E;
    --p-ink: #F7ECE2;
    --p-ink2: #CDB8A8;
    --p-ink3: #9A8474;
    --p-ink4: #6E5D52;
    --p-ink-muted: #CDB8A8;
    --p-accent: #F08AA6;
    --p-accent2: #B89CF0;
    --p-accent-soft: #3D2A30;
    --p-accent-ink: #F8B9CA;
    --p-on-accent: #1B1518;
    --p-shadow-c: #000000;
    --p-career: #B89CF0; --p-career-soft: #2A2333; --p-career-ink: #C9B0F5;
    --p-health: #7AD49A; --p-health-soft: #22302A; --p-health-ink: #9EE2B6;
    --p-learning: #F0B566; --p-learning-soft: #302619; --p-learning-ink: #F0C98A;
    --p-money: #7CC2E8; --p-money-soft: #1F2D35; --p-money-ink: #A0D4EF;
    /* semantic triads: never seed-dependent */
    --red: #EE8585; --red-soft: #2F1F1F; --red-ink: #F0A0A0;
    --green: #7AD49A; --green-soft: #22302A; --green-ink: #9EE2B6;
    --amber: #F0B566; --amber-soft: #302619; --amber-ink: #F0C98A;
    /* recipes for derived seeds, measured off rose: L C (abs) or dL kC dH (rel) */
    --n-bg-l: 0.2043; --n-bg-c: 0.0112;
    --n-glow-l: 0.2487; --n-glow-c: 0.0221;
    --n-surface-l: 0.2502; --n-surface-c: 0.0142;
    --n-surface2-l: 0.2803; --n-surface2-c: 0.0151;
    --n-surface3-l: 0.3108; --n-surface3-c: 0.0174;
    --n-inset-l: 0.3188; --n-inset-c: 0.0173;
    --n-line-l: 0.3188; --n-line-c: 0.0173;
    --n-line2-l: 0.3626; --n-line2-c: 0.018;
    --n-ink-l: 0.949; --n-ink-c: 0.0179;
    --n-ink2-l: 0.796; --n-ink2-c: 0.0328;
    --n-ink3-l: 0.6291; --n-ink3-c: 0.0357;
    --n-ink4-l: 0.4917; --n-ink4-c: 0.0281;
    --n-ink-muted-l: 0.796; --n-ink-muted-c: 0.0328;
    --n-accent-dl: 0.0592; --n-accent-kc: 0.7805; --n-accent-dh: -3;
    --n-accent2-dl: 0.0585; --n-accent2-kc: 0.745; --n-accent2-dh: -67.22;
    --n-accent-soft-l: 0.3097; --n-accent-soft-c: 0.0298;
    --n-accent-ink-l: 0.848; --n-accent-ink-c: 0.0757;
    --n-on-accent-l: 0.2043; --n-on-accent-c: 0.0112;
    --n-shadow-c-l: 0; --n-shadow-c-c: 0;
    --shadow-a1: 30%; --shadow-a2: 40%; --shadow-a3: 50%;
  }
}

/* ── 2. Seeds (HCT hue in the comment). --derive is a switch: empty = derive
 *    from --seed, initial = use the rose literals. --hr-* rotate the domain
 *    hues towards the seed (≤20°, like SoftPastel.harmonizeHue); --cmax-*-light|dark
 *    cap a derived chroma at the sRGB gamut edge for that hue and lightness.
 *    Hue maths is in plain numbers: in relative colour syntax h is a <number>. */
:root,
[data-seed="rose"] { --seed: #EC6A8C; --derive: initial; } /* 6 */
[data-seed="ember"] { /* 51 */
  --seed: #E67620; --derive: ;
  --hr-career: 20; --hr-health: -20; --hr-learning: -17.83; --hr-money: 20;
  --cmax-accent-ink-light: 0.114; --cmax-learning-soft-light: 0.0329; --cmax-on-accent-light: 0.0739; --cmax-surface-light: 0.0033;
}
[data-seed="olive"] { /* 96 */
  --seed: #B19300; --derive: ;
  --hr-career: 20; --hr-health: -20; --hr-learning: 20; --hr-money: -20;
  --cmax-accent-ink-light: 0.0906; --cmax-on-accent-light: 0.0587;
}
[data-seed="fern"] { /* 141 */
  --seed: #58A741; --derive: ;
  --hr-career: -20; --hr-health: -12.66; --hr-learning: 20; --hr-money: -20;
  --cmax-accent2-light: 0.1322;
}
[data-seed="teal"] { /* 186 */
  --seed: #00A798; --derive: ;
  --hr-career: -20; --hr-health: 20; --hr-learning: 20; --hr-money: -20;
  --cmax-accent-ink-light: 0.0783; --cmax-on-accent-light: 0.0508;
}
[data-seed="sky"] { /* 231 */
  --seed: #00A1D1; --derive: ;
  --hr-career: -20; --hr-health: 20; --hr-learning: 20; --hr-money: -11;
  --cmax-accent-ink-light: 0.0863; --cmax-on-accent-light: 0.056;
}
[data-seed="indigo"] { /* 276 */
  --seed: #718EFF; --derive: ;
  --hr-career: -20; --hr-health: 20; --hr-learning: -20; --hr-money: 20;
  --cmax-accent-ink-dark: 0.0736; --cmax-accent2-dark: 0.1236; --cmax-accent2-light: 0.1091; --cmax-learning-soft-light: 0.0322; --cmax-surface-light: 0.0028; --cmax-surface2-light: 0.0118;
}
[data-seed="orchid"] { /* 321 */
  --seed: #C476E2; --derive: ;
  --hr-career: 17.05; --hr-health: 20; --hr-learning: -20; --hr-money: 20;
  --cmax-learning-soft-light: 0.0322;
}

/* ── 3. Resolve. Runs on every element that can change theme or seed, so the
 *    two attributes nest in any order. --x-* is the derived value; while
 *    --derive is initial it is invalid and the rose literal (--p-*) wins. ── */
:root,
[data-theme],
[data-seed] {
  --cap-accent2: var(--cap-accent2-l, var(--cap-accent2-d, 1)); --cap-accent2-l: var(--is-light) var(--cmax-accent2-light, 1); --cap-accent2-d: var(--is-dark) var(--cmax-accent2-dark, 1);
  --cap-accent-ink: var(--cap-accent-ink-l, var(--cap-accent-ink-d, 1)); --cap-accent-ink-l: var(--is-light) var(--cmax-accent-ink-light, 1); --cap-accent-ink-d: var(--is-dark) var(--cmax-accent-ink-dark, 1);
  --cap-learning-soft: var(--cap-learning-soft-l, var(--cap-learning-soft-d, 1)); --cap-learning-soft-l: var(--is-light) var(--cmax-learning-soft-light, 1); --cap-learning-soft-d: var(--is-dark) var(--cmax-learning-soft-dark, 1);
  --cap-on-accent: var(--cap-on-accent-l, var(--cap-on-accent-d, 1)); --cap-on-accent-l: var(--is-light) var(--cmax-on-accent-light, 1); --cap-on-accent-d: var(--is-dark) var(--cmax-on-accent-dark, 1);
  --cap-surface: var(--cap-surface-l, var(--cap-surface-d, 1)); --cap-surface-l: var(--is-light) var(--cmax-surface-light, 1); --cap-surface-d: var(--is-dark) var(--cmax-surface-dark, 1);
  --cap-surface2: var(--cap-surface2-l, var(--cap-surface2-d, 1)); --cap-surface2-l: var(--is-light) var(--cmax-surface2-light, 1); --cap-surface2-d: var(--is-dark) var(--cmax-surface2-dark, 1);
  --x-bg: var(--derive) oklch(from var(--seed) var(--n-bg-l) var(--n-bg-c) h);
  --bg: var(--x-bg, var(--p-bg));
  --x-glow: var(--derive) oklch(from var(--seed) var(--n-glow-l) var(--n-glow-c) h);
  --glow: var(--x-glow, var(--p-glow));
  --x-surface: var(--derive) oklch(from var(--seed) var(--n-surface-l) min(var(--n-surface-c), var(--cap-surface)) h);
  --surface: var(--x-surface, var(--p-surface));
  --x-surface2: var(--derive) oklch(from var(--seed) var(--n-surface2-l) min(var(--n-surface2-c), var(--cap-surface2)) h);
  --surface2: var(--x-surface2, var(--p-surface2));
  --x-surface3: var(--derive) oklch(from var(--seed) var(--n-surface3-l) var(--n-surface3-c) h);
  --surface3: var(--x-surface3, var(--p-surface3));
  --x-inset: var(--derive) oklch(from var(--seed) var(--n-inset-l) var(--n-inset-c) h);
  --inset: var(--x-inset, var(--p-inset));
  --x-line: var(--derive) oklch(from var(--seed) var(--n-line-l) var(--n-line-c) h);
  --line: var(--x-line, var(--p-line));
  --x-line2: var(--derive) oklch(from var(--seed) var(--n-line2-l) var(--n-line2-c) h);
  --line2: var(--x-line2, var(--p-line2));
  --x-ink: var(--derive) oklch(from var(--seed) var(--n-ink-l) var(--n-ink-c) h);
  --ink: var(--x-ink, var(--p-ink));
  --x-ink2: var(--derive) oklch(from var(--seed) var(--n-ink2-l) var(--n-ink2-c) h);
  --ink2: var(--x-ink2, var(--p-ink2));
  --x-ink3: var(--derive) oklch(from var(--seed) var(--n-ink3-l) var(--n-ink3-c) h);
  --ink3: var(--x-ink3, var(--p-ink3));
  --x-ink4: var(--derive) oklch(from var(--seed) var(--n-ink4-l) var(--n-ink4-c) h);
  --ink4: var(--x-ink4, var(--p-ink4));
  --x-ink-muted: var(--derive) oklch(from var(--seed) var(--n-ink-muted-l) var(--n-ink-muted-c) h);
  --ink-muted: var(--x-ink-muted, var(--p-ink-muted));
  --x-accent: var(--derive) oklch(from var(--seed) calc(l + var(--n-accent-dl)) calc(c * var(--n-accent-kc)) calc(h + var(--n-accent-dh)));
  --accent: var(--x-accent, var(--p-accent));
  --x-accent2: var(--derive) oklch(from var(--seed) calc(l + var(--n-accent2-dl)) min(calc(c * var(--n-accent2-kc)), var(--cap-accent2)) calc(h + var(--n-accent2-dh)));
  --accent2: var(--x-accent2, var(--p-accent2));
  --x-accent-soft: var(--derive) oklch(from var(--seed) var(--n-accent-soft-l) var(--n-accent-soft-c) h);
  --accent-soft: var(--x-accent-soft, var(--p-accent-soft));
  --x-accent-ink: var(--derive) oklch(from var(--seed) var(--n-accent-ink-l) min(var(--n-accent-ink-c), var(--cap-accent-ink)) h);
  --accent-ink: var(--x-accent-ink, var(--p-accent-ink));
  --x-on-accent: var(--derive) oklch(from var(--seed) var(--n-on-accent-l) min(var(--n-on-accent-c), var(--cap-on-accent)) h);
  --on-accent: var(--x-on-accent, var(--p-on-accent));
  --x-shadow-c: var(--derive) oklch(from var(--seed) var(--n-shadow-c-l) var(--n-shadow-c-c) h);
  --shadow-c: var(--x-shadow-c, var(--p-shadow-c));
  --x-career: var(--derive) oklch(from var(--p-career) l c calc(h + var(--hr-career, 0)));
  --career: var(--x-career, var(--p-career));
  --x-career-soft: var(--derive) oklch(from var(--p-career-soft) l c calc(h + var(--hr-career, 0)));
  --career-soft: var(--x-career-soft, var(--p-career-soft));
  --x-career-ink: var(--derive) oklch(from var(--p-career-ink) l c calc(h + var(--hr-career, 0)));
  --career-ink: var(--x-career-ink, var(--p-career-ink));
  --x-health: var(--derive) oklch(from var(--p-health) l c calc(h + var(--hr-health, 0)));
  --health: var(--x-health, var(--p-health));
  --x-health-soft: var(--derive) oklch(from var(--p-health-soft) l c calc(h + var(--hr-health, 0)));
  --health-soft: var(--x-health-soft, var(--p-health-soft));
  --x-health-ink: var(--derive) oklch(from var(--p-health-ink) l c calc(h + var(--hr-health, 0)));
  --health-ink: var(--x-health-ink, var(--p-health-ink));
  --x-learning: var(--derive) oklch(from var(--p-learning) l c calc(h + var(--hr-learning, 0)));
  --learning: var(--x-learning, var(--p-learning));
  --x-learning-soft: var(--derive) oklch(from var(--p-learning-soft) l min(c, var(--cap-learning-soft)) calc(h + var(--hr-learning, 0)));
  --learning-soft: var(--x-learning-soft, var(--p-learning-soft));
  --x-learning-ink: var(--derive) oklch(from var(--p-learning-ink) l c calc(h + var(--hr-learning, 0)));
  --learning-ink: var(--x-learning-ink, var(--p-learning-ink));
  --x-money: var(--derive) oklch(from var(--p-money) l c calc(h + var(--hr-money, 0)));
  --money: var(--x-money, var(--p-money));
  --x-money-soft: var(--derive) oklch(from var(--p-money-soft) l c calc(h + var(--hr-money, 0)));
  --money-soft: var(--x-money-soft, var(--p-money-soft));
  --x-money-ink: var(--derive) oklch(from var(--p-money-ink) l c calc(h + var(--hr-money, 0)));
  --money-ink: var(--x-money-ink, var(--p-money-ink));
  /* aliases and state layers */
  --music: var(--accent); --music-soft: var(--accent-soft); --music-ink: var(--accent-ink); /* the rose interest follows the accent, as in the app */
  --finance: var(--money); --finance-soft: var(--money-soft); --finance-ink: var(--money-ink);
  --focus: var(--accent-ink); /* ≥3:1 on every surface */
  --selection: color-mix(in srgb, var(--accent) 28%, transparent);
  --hover: color-mix(in srgb, var(--ink) 6%, transparent);
  --pressed: color-mix(in srgb, var(--ink) 10%, transparent);
  --scrim: color-mix(in srgb, var(--bg) 72%, transparent);
  --shadow-soft: 0 4px 14px color-mix(in srgb, var(--shadow-c) var(--shadow-a1), transparent);
  --shadow-card: 0 8px 24px color-mix(in srgb, var(--shadow-c) var(--shadow-a2), transparent);
  --shadow-lift: 0 14px 36px color-mix(in srgb, var(--shadow-c) var(--shadow-a3), transparent);
  --ambient: radial-gradient(120% 70% at 12% -8%, var(--glow) 0%, transparent 62%),
             radial-gradient(90% 60% at 100% 0%, var(--glow) 0%, transparent 55%);
}

/* Opt-in smooth recolour: <html data-theme-anim>. Registered tokens ease on the
   effects-slow spring (colour never overshoots). Off under reduced motion. */
[data-theme-anim],
[data-theme-anim] [data-theme],
[data-theme-anim] [data-seed] {
  transition:
    --bg var(--theme-dur) var(--ease-effects-slow),
    --glow var(--theme-dur) var(--ease-effects-slow),
    --surface var(--theme-dur) var(--ease-effects-slow),
    --surface2 var(--theme-dur) var(--ease-effects-slow),
    --surface3 var(--theme-dur) var(--ease-effects-slow),
    --inset var(--theme-dur) var(--ease-effects-slow),
    --line var(--theme-dur) var(--ease-effects-slow),
    --line2 var(--theme-dur) var(--ease-effects-slow),
    --ink var(--theme-dur) var(--ease-effects-slow),
    --ink2 var(--theme-dur) var(--ease-effects-slow),
    --ink3 var(--theme-dur) var(--ease-effects-slow),
    --ink4 var(--theme-dur) var(--ease-effects-slow),
    --ink-muted var(--theme-dur) var(--ease-effects-slow),
    --accent var(--theme-dur) var(--ease-effects-slow),
    --accent2 var(--theme-dur) var(--ease-effects-slow),
    --accent-soft var(--theme-dur) var(--ease-effects-slow),
    --accent-ink var(--theme-dur) var(--ease-effects-slow),
    --on-accent var(--theme-dur) var(--ease-effects-slow),
    --shadow-c var(--theme-dur) var(--ease-effects-slow),
    --career var(--theme-dur) var(--ease-effects-slow),
    --career-soft var(--theme-dur) var(--ease-effects-slow),
    --career-ink var(--theme-dur) var(--ease-effects-slow),
    --health var(--theme-dur) var(--ease-effects-slow),
    --health-soft var(--theme-dur) var(--ease-effects-slow),
    --health-ink var(--theme-dur) var(--ease-effects-slow),
    --learning var(--theme-dur) var(--ease-effects-slow),
    --learning-soft var(--theme-dur) var(--ease-effects-slow),
    --learning-ink var(--theme-dur) var(--ease-effects-slow),
    --money var(--theme-dur) var(--ease-effects-slow),
    --money-soft var(--theme-dur) var(--ease-effects-slow),
    --money-ink var(--theme-dur) var(--ease-effects-slow);
}
@media (prefers-reduced-motion: reduce) {
  [data-theme-anim], [data-theme-anim] [data-theme], [data-theme-anim] [data-seed] { transition: none; }
}