/* Family OS design system (foundation).
 * One shared token system. A persona is chosen with data-persona on <html> (or on any wrapper to scope it):
 *   craig | sasha | amaya | grandparent | teen | teen-young
 * A member can still pick their own accent with data-theme (blush, terracotta, marbella, sage, plum, midnight),
 * plus data-text-size (standard, large, xl), data-color-mode (light, dark, auto) and data-view (calm, full).
 * Colours are OKLCH, written as light-dark(light, dark) pairs so "auto" follows the device with no script.
 * Fonts: system stacks, plus one self-hosted SIL OFL font (Plus Jakarta Sans) in assets/fonts/ (no external requests).
 * Older browsers without light-dark() get plain hex tokens from the @supports block at the end of this file.
 * Contrast is enforced by _modules_family_os/tests/family-design.test.mjs. Do not edit a colour without running it.
 * Keep every token in every persona block; the test fails on a missing one.
 */

@font-face {
  font-family: "FOS Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- persona token blocks ---------- */
[data-persona="craig"] {
  --bg: light-dark(oklch(0.97 0.008 265), oklch(0.15 0.02 265));
  --surface: light-dark(oklch(0.99 0.005 265), oklch(0.2 0.022 265));
  --surface-2: light-dark(oklch(0.94 0.01 265), oklch(0.25 0.024 265));
  --ink: light-dark(oklch(0.2 0.02 265), oklch(0.95 0.01 265));
  --ink-2: light-dark(oklch(0.38 0.02 265), oklch(0.8 0.015 265));
  --muted: light-dark(oklch(0.46 0.02 265), oklch(0.7 0.02 265));
  --line: light-dark(oklch(0.88 0.01 265), oklch(0.32 0.025 265));
  --control-edge: light-dark(oklch(0.56 0.03 265), oklch(0.62 0.03 265));
  --accent: light-dark(oklch(0.48 0.13 160), oklch(0.74 0.17 160));
  --on-accent: light-dark(oklch(0.985 0.01 160), oklch(0.17 0.03 160));
  --accent-ink: light-dark(oklch(0.43 0.12 160), oklch(0.8 0.16 160));
  --accent-soft: light-dark(oklch(0.94 0.04 160), oklch(0.28 0.06 160));
  --on-accent-soft: light-dark(oklch(0.3 0.07 160), oklch(0.92 0.06 160));
  --success-ink: light-dark(oklch(0.4 0.12 150), oklch(0.8 0.15 150));
  --warn-ink: light-dark(oklch(0.43 0.1 65), oklch(0.82 0.13 85));
  --danger-ink: light-dark(oklch(0.43 0.17 25), oklch(0.78 0.14 25));
  --accent-2: light-dark(oklch(0.48 0.11 70), oklch(0.82 0.14 85));
  --on-accent-2: light-dark(oklch(0.985 0.01 70), oklch(0.2 0.03 85));
  --accent-2-ink: light-dark(oklch(0.43 0.1 70), oklch(0.84 0.13 85));
  --tint-a: light-dark(oklch(0.95 0.02 200), oklch(0.24 0.03 200));
  --tint-b: light-dark(oklch(0.95 0.03 85), oklch(0.25 0.04 85));
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --weight-display: 650;
  --tracking-display: -0.01em;
  --fs-base-px: 16px;
  --ratio: 1.25;
  --lh: 1.5;
  --radius: 6px;
  --radius-lg: 10px;
  --target: 44px;
  --density: 0.9;
}
[data-persona="craig"]:not([data-color-mode]) { color-scheme: dark; }

[data-persona="sasha"] {
  --bg: light-dark(oklch(0.975 0.012 80), oklch(0.18 0.012 40));
  --surface: light-dark(oklch(0.99 0.008 80), oklch(0.23 0.014 40));
  --surface-2: light-dark(oklch(0.945 0.018 78), oklch(0.28 0.016 40));
  --ink: light-dark(oklch(0.22 0.015 60), oklch(0.95 0.01 80));
  --ink-2: light-dark(oklch(0.38 0.02 60), oklch(0.82 0.015 70));
  --muted: light-dark(oklch(0.47 0.02 60), oklch(0.72 0.02 70));
  --line: light-dark(oklch(0.89 0.015 78), oklch(0.35 0.02 50));
  --control-edge: light-dark(oklch(0.56 0.03 70), oklch(0.64 0.03 60));
  --accent: light-dark(oklch(0.5 0.19 17), oklch(0.72 0.16 15));
  --on-accent: light-dark(oklch(0.985 0.01 17), oklch(0.2 0.04 15));
  --accent-ink: light-dark(oklch(0.46 0.19 17), oklch(0.8 0.12 15));
  --accent-soft: light-dark(oklch(0.94 0.035 17), oklch(0.3 0.07 15));
  --on-accent-soft: light-dark(oklch(0.32 0.1 17), oklch(0.92 0.04 15));
  --success-ink: light-dark(oklch(0.4 0.12 150), oklch(0.8 0.15 150));
  --warn-ink: light-dark(oklch(0.43 0.1 65), oklch(0.82 0.13 85));
  --danger-ink: light-dark(oklch(0.43 0.17 25), oklch(0.78 0.14 25));
  --accent-2: light-dark(oklch(0.45 0.11 160), oklch(0.74 0.13 160));
  --on-accent-2: light-dark(oklch(0.985 0.01 160), oklch(0.18 0.03 160));
  --accent-2-ink: light-dark(oklch(0.42 0.1 160), oklch(0.8 0.12 160));
  --tint-a: light-dark(oklch(0.95 0.03 150), oklch(0.26 0.03 150));
  --tint-b: light-dark(oklch(0.96 0.04 90), oklch(0.27 0.04 90));
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: "FOS Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "FOS Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-display: 560;
  --tracking-display: -0.01em;
  --fs-base-px: 17px;
  --ratio: 1.25;
  --lh: 1.6;
  --radius: 14px;
  --radius-lg: 22px;
  --target: 44px;
  --density: 1.1;
}
[data-persona="sasha"]:not([data-color-mode]) { color-scheme: light; }

[data-persona="amaya"] {
  --bg: light-dark(oklch(0.97 0.012 75), oklch(0.22 0.04 300));
  --surface: light-dark(oklch(0.99 0.008 75), oklch(0.27 0.045 300));
  --surface-2: light-dark(oklch(0.94 0.03 295), oklch(0.32 0.05 300));
  --ink: light-dark(oklch(0.3 0.05 305), oklch(0.95 0.015 300));
  --ink-2: light-dark(oklch(0.4 0.05 305), oklch(0.84 0.03 300));
  --muted: light-dark(oklch(0.5 0.05 305), oklch(0.75 0.04 300));
  --line: light-dark(oklch(0.89 0.02 295), oklch(0.4 0.05 300));
  --control-edge: light-dark(oklch(0.56 0.06 305), oklch(0.66 0.06 300));
  --accent: light-dark(oklch(0.72 0.15 3), oklch(0.76 0.13 3));
  --on-accent: light-dark(oklch(0.24 0.06 305), oklch(0.22 0.05 305));
  --accent-ink: light-dark(oklch(0.5 0.18 3), oklch(0.82 0.12 3));
  --accent-soft: light-dark(oklch(0.94 0.03 295), oklch(0.34 0.07 300));
  --on-accent-soft: light-dark(oklch(0.32 0.07 305), oklch(0.94 0.03 300));
  --success-ink: light-dark(oklch(0.4 0.12 150), oklch(0.8 0.15 150));
  --warn-ink: light-dark(oklch(0.43 0.1 65), oklch(0.82 0.13 85));
  --danger-ink: light-dark(oklch(0.43 0.17 25), oklch(0.78 0.14 25));
  --accent-2: light-dark(oklch(0.5 0.14 300), oklch(0.78 0.1 300));
  --on-accent-2: light-dark(oklch(0.985 0.01 300), oklch(0.24 0.05 300));
  --accent-2-ink: light-dark(oklch(0.45 0.14 300), oklch(0.84 0.09 300));
  --tint-a: light-dark(oklch(0.95 0.035 160), oklch(0.3 0.04 165));
  --tint-b: light-dark(oklch(0.96 0.05 95), oklch(0.32 0.05 90));
  --font-display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --weight-display: 800;
  --tracking-display: 0;
  --fs-base-px: 19px;
  --ratio: 1.333;
  --lh: 1.5;
  --radius: 24px;
  --radius-lg: 32px;
  --target: 56px;
  --density: 1.3;
}
[data-persona="amaya"]:not([data-color-mode]) { color-scheme: light; }

[data-persona="grandparent"] {
  --bg: light-dark(oklch(0.985 0.006 85), oklch(0.15 0.015 255));
  --surface: light-dark(oklch(0.995 0.004 85), oklch(0.2 0.017 255));
  --surface-2: light-dark(oklch(0.955 0.01 85), oklch(0.25 0.02 255));
  --ink: light-dark(oklch(0.16 0.03 255), oklch(0.97 0.005 255));
  --ink-2: light-dark(oklch(0.27 0.03 255), oklch(0.9 0.01 255));
  --muted: light-dark(oklch(0.36 0.03 255), oklch(0.82 0.015 255));
  --line: light-dark(oklch(0.84 0.01 255), oklch(0.4 0.02 255));
  --control-edge: light-dark(oklch(0.45 0.04 255), oklch(0.72 0.03 255));
  --accent: light-dark(oklch(0.4 0.13 255), oklch(0.78 0.12 245));
  --on-accent: light-dark(oklch(0.99 0.005 255), oklch(0.15 0.03 255));
  --accent-ink: light-dark(oklch(0.38 0.13 255), oklch(0.84 0.1 245));
  --accent-soft: light-dark(oklch(0.93 0.03 255), oklch(0.3 0.06 255));
  --on-accent-soft: light-dark(oklch(0.25 0.07 255), oklch(0.95 0.02 255));
  --success-ink: light-dark(oklch(0.36 0.12 150), oklch(0.82 0.15 150));
  --warn-ink: light-dark(oklch(0.4 0.1 65), oklch(0.84 0.13 85));
  --danger-ink: light-dark(oklch(0.4 0.16 25), oklch(0.8 0.14 25));
  --accent-2: light-dark(oklch(0.4 0.09 200), oklch(0.8 0.1 200));
  --on-accent-2: light-dark(oklch(0.99 0.005 200), oklch(0.15 0.03 200));
  --accent-2-ink: light-dark(oklch(0.38 0.09 200), oklch(0.85 0.09 200));
  --tint-a: light-dark(oklch(0.95 0.03 150), oklch(0.27 0.03 150));
  --tint-b: light-dark(oklch(0.96 0.04 85), oklch(0.28 0.04 85));
  --font-display: "Atkinson Hyperlegible", Seravek, "Gill Sans Nova", Ubuntu, Calibri, "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", Seravek, "Gill Sans Nova", Ubuntu, Calibri, "Segoe UI", system-ui, sans-serif;
  --font-num: "Atkinson Hyperlegible", Seravek, "Gill Sans Nova", Ubuntu, Calibri, "Segoe UI", system-ui, sans-serif;
  --weight-display: 700;
  --tracking-display: 0;
  --fs-base-px: 20px;
  --ratio: 1.25;
  --lh: 1.6;
  --radius: 12px;
  --radius-lg: 16px;
  --target: 64px;
  --density: 1.4;
}
[data-persona="grandparent"]:not([data-color-mode]) { color-scheme: light; }

[data-persona="teen"] {
  --bg: light-dark(oklch(0.97 0.01 300), oklch(0.14 0.035 300));
  --surface: light-dark(oklch(0.99 0.006 300), oklch(0.19 0.04 300));
  --surface-2: light-dark(oklch(0.94 0.02 300), oklch(0.24 0.045 300));
  --ink: light-dark(oklch(0.22 0.04 295), oklch(0.96 0.01 300));
  --ink-2: light-dark(oklch(0.38 0.04 295), oklch(0.84 0.02 300));
  --muted: light-dark(oklch(0.47 0.04 295), oklch(0.74 0.03 300));
  --line: light-dark(oklch(0.88 0.02 300), oklch(0.34 0.05 295));
  --control-edge: light-dark(oklch(0.56 0.06 295), oklch(0.64 0.06 295));
  --accent: light-dark(oklch(0.5 0.23 305), oklch(0.68 0.22 305));
  --on-accent: light-dark(oklch(0.985 0.01 305), oklch(0.16 0.04 295));
  --accent-ink: light-dark(oklch(0.46 0.22 305), oklch(0.8 0.15 305));
  --accent-soft: light-dark(oklch(0.94 0.04 305), oklch(0.3 0.1 305));
  --on-accent-soft: light-dark(oklch(0.3 0.12 305), oklch(0.93 0.04 305));
  --success-ink: light-dark(oklch(0.4 0.12 150), oklch(0.8 0.15 150));
  --warn-ink: light-dark(oklch(0.43 0.1 65), oklch(0.82 0.13 85));
  --danger-ink: light-dark(oklch(0.43 0.17 25), oklch(0.78 0.14 25));
  --accent-2: light-dark(oklch(0.5 0.2 355), oklch(0.7 0.2 355));
  --on-accent-2: light-dark(oklch(0.985 0.01 355), oklch(0.17 0.04 355));
  --accent-2-ink: light-dark(oklch(0.46 0.2 355), oklch(0.8 0.14 355));
  --tint-a: light-dark(oklch(0.95 0.03 10), oklch(0.28 0.06 8));
  --tint-b: light-dark(oklch(0.95 0.03 200), oklch(0.26 0.04 200));
  --font-display: "FOS Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "FOS Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "FOS Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-display: 700;
  --tracking-display: -0.01em;
  --fs-base-px: 16px;
  --ratio: 1.333;
  --lh: 1.5;
  --radius: 12px;
  --radius-lg: 18px;
  --target: 44px;
  --density: 1;
}
[data-persona="teen"]:not([data-color-mode]) { color-scheme: dark; }

[data-persona="teen-young"] {
  --bg: light-dark(oklch(0.97 0.01 235), oklch(0.23 0.055 255));
  --surface: light-dark(oklch(0.99 0.006 235), oklch(0.28 0.06 255));
  --surface-2: light-dark(oklch(0.94 0.02 235), oklch(0.33 0.065 255));
  --ink: light-dark(oklch(0.22 0.04 262), oklch(0.96 0.01 250));
  --ink-2: light-dark(oklch(0.38 0.04 262), oklch(0.85 0.02 250));
  --muted: light-dark(oklch(0.47 0.04 262), oklch(0.76 0.03 250));
  --line: light-dark(oklch(0.88 0.02 235), oklch(0.4 0.05 262));
  --control-edge: light-dark(oklch(0.56 0.05 250), oklch(0.68 0.05 250));
  --accent: light-dark(oklch(0.5 0.12 235), oklch(0.75 0.13 232));
  --on-accent: light-dark(oklch(0.985 0.01 235), oklch(0.2 0.04 262));
  --accent-ink: light-dark(oklch(0.45 0.12 235), oklch(0.82 0.11 232));
  --accent-soft: light-dark(oklch(0.94 0.035 232), oklch(0.32 0.07 240));
  --on-accent-soft: light-dark(oklch(0.3 0.07 245), oklch(0.94 0.03 232));
  --success-ink: light-dark(oklch(0.4 0.12 150), oklch(0.8 0.15 150));
  --warn-ink: light-dark(oklch(0.43 0.1 65), oklch(0.82 0.13 85));
  --danger-ink: light-dark(oklch(0.43 0.17 25), oklch(0.78 0.14 25));
  --accent-2: light-dark(oklch(0.5 0.21 17), oklch(0.68 0.22 17));
  --on-accent-2: light-dark(oklch(0.985 0.01 17), oklch(0.17 0.04 17));
  --accent-2-ink: light-dark(oklch(0.46 0.2 17), oklch(0.8 0.14 17));
  --tint-a: light-dark(oklch(0.95 0.035 12), oklch(0.3 0.08 12));
  --tint-b: light-dark(oklch(0.95 0.03 232), oklch(0.3 0.05 240));
  --font-display: "FOS Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "FOS Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "FOS Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-display: 800;
  --tracking-display: -0.03em;
  --fs-base-px: 17px;
  --ratio: 1.333;
  --lh: 1.5;
  --radius: 20px;
  --radius-lg: 28px;
  --target: 48px;
  --density: 1.1;
}
[data-persona="teen-young"]:not([data-color-mode]) { color-scheme: dark; }


/* ---------- member-chosen accent (overrides the persona accent only) ---------- */
[data-theme="blush"] {
  --accent: light-dark(oklch(0.47 0.15 5), oklch(0.74 0.14 5));
  --on-accent: light-dark(oklch(0.985 0.01 5), oklch(0.18 0.03 5));
  --accent-ink: light-dark(oklch(0.43 0.15 5), oklch(0.82 0.12 5));
  --accent-soft: light-dark(oklch(0.94 0.035 5), oklch(0.3 0.06 5));
  --on-accent-soft: light-dark(oklch(0.3 0.08 5), oklch(0.93 0.04 5));
}
[data-theme="terracotta"] {
  --accent: light-dark(oklch(0.47 0.15 40), oklch(0.74 0.14 40));
  --on-accent: light-dark(oklch(0.985 0.01 40), oklch(0.18 0.03 40));
  --accent-ink: light-dark(oklch(0.43 0.15 40), oklch(0.82 0.12 40));
  --accent-soft: light-dark(oklch(0.94 0.035 40), oklch(0.3 0.06 40));
  --on-accent-soft: light-dark(oklch(0.3 0.08 40), oklch(0.93 0.04 40));
}
[data-theme="marbella"] {
  --accent: light-dark(oklch(0.47 0.15 205), oklch(0.74 0.14 205));
  --on-accent: light-dark(oklch(0.985 0.01 205), oklch(0.18 0.03 205));
  --accent-ink: light-dark(oklch(0.43 0.15 205), oklch(0.82 0.12 205));
  --accent-soft: light-dark(oklch(0.94 0.035 205), oklch(0.3 0.06 205));
  --on-accent-soft: light-dark(oklch(0.3 0.08 205), oklch(0.93 0.04 205));
}
[data-theme="sage"] {
  --accent: light-dark(oklch(0.47 0.15 150), oklch(0.74 0.14 150));
  --on-accent: light-dark(oklch(0.985 0.01 150), oklch(0.18 0.03 150));
  --accent-ink: light-dark(oklch(0.43 0.15 150), oklch(0.82 0.12 150));
  --accent-soft: light-dark(oklch(0.94 0.035 150), oklch(0.3 0.06 150));
  --on-accent-soft: light-dark(oklch(0.3 0.08 150), oklch(0.93 0.04 150));
}
[data-theme="plum"] {
  --accent: light-dark(oklch(0.47 0.15 330), oklch(0.74 0.14 330));
  --on-accent: light-dark(oklch(0.985 0.01 330), oklch(0.18 0.03 330));
  --accent-ink: light-dark(oklch(0.43 0.15 330), oklch(0.82 0.12 330));
  --accent-soft: light-dark(oklch(0.94 0.035 330), oklch(0.3 0.06 330));
  --on-accent-soft: light-dark(oklch(0.3 0.08 330), oklch(0.93 0.04 330));
}
[data-theme="midnight"] {
  --accent: light-dark(oklch(0.47 0.15 270), oklch(0.74 0.14 270));
  --on-accent: light-dark(oklch(0.985 0.01 270), oklch(0.18 0.03 270));
  --accent-ink: light-dark(oklch(0.43 0.15 270), oklch(0.82 0.12 270));
  --accent-soft: light-dark(oklch(0.94 0.035 270), oklch(0.3 0.06 270));
  --on-accent-soft: light-dark(oklch(0.3 0.08 270), oklch(0.93 0.04 270));
}


/* ---------- colour mode ---------- */
[data-color-mode="light"] { color-scheme: light; }
[data-color-mode="dark"] { color-scheme: dark; }
[data-color-mode="auto"] { color-scheme: light dark; }

/* ---------- text size and view ---------- */
[data-text-size="standard"] { --fs-scale: 1; }
[data-text-size="large"] { --fs-scale: 1.125; }
[data-text-size="xl"] { --fs-scale: 1.3; }
[data-view="calm"] { --view-space: 1.2; }
[data-view="full"] { --view-space: 0.9; }
[data-view="calm"] [data-view-only="full"] { display: none; }

/* ---------- shared derived scale and base ---------- */
[data-persona] {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 160ms;
  --ease-pop: var(--ease);
  --measure: 68ch;
  --fs-base: calc(var(--fs-base-px) * var(--fs-scale, 1));
  --fs-sm: calc(var(--fs-base) * 0.875);
  --fs-h4: calc(var(--fs-base) * var(--ratio));
  --fs-h3: calc(var(--fs-base) * var(--ratio) * var(--ratio));
  --fs-h2: calc(var(--fs-base) * var(--ratio) * var(--ratio) * var(--ratio));
  --fs-h1: calc(var(--fs-base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
  --space-1: calc(4px * var(--density) * var(--view-space, 1.2));
  --space-2: calc(8px * var(--density) * var(--view-space, 1.2));
  --space-3: calc(12px * var(--density) * var(--view-space, 1.2));
  --space-4: calc(16px * var(--density) * var(--view-space, 1.2));
  --space-5: calc(24px * var(--density) * var(--view-space, 1.2));
  --space-6: calc(40px * var(--density) * var(--view-space, 1.2));
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  accent-color: var(--accent-ink);
}
[data-persona] *, [data-persona] *::before, [data-persona] *::after { box-sizing: border-box; }
[data-persona] ::selection { background: var(--accent-soft); color: var(--on-accent-soft); }

/* ---------- focus, skip link, touch targets ---------- */
[data-persona] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  /* longhands: if a colour token were ever invalid the ring still draws (outline-style never falls to none) */
  outline-style: solid;
  outline-width: 3px;
  outline-color: CanvasText;
  outline-color: var(--accent-ink);
  outline-offset: 3px;
}
.fd-skip {
  position: absolute;
  inset-inline-start: var(--space-3, 12px);
  inset-block-start: -200px;
  z-index: 100;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 16px;
  background: var(--surface);
  color: var(--ink);
  border-style: solid;
  border-width: 2px;
  border-color: CanvasText;
  border-color: var(--accent-ink);
  border-radius: var(--radius, 8px);
  font-weight: 600;
  text-decoration: none;
}
.fd-skip:focus-visible { inset-block-start: var(--space-3, 12px); }
.fd-visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- type ---------- */
.fd-display, .fd-h1, .fd-h2, .fd-h3, .fd-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--ink);
}
.fd-display { font-size: min(calc(var(--fs-h1) * var(--ratio)), 15vw); overflow-wrap: anywhere; }
.fd-h1 { font-size: min(var(--fs-h1), 13vw); overflow-wrap: anywhere; }
.fd-h2 { font-size: var(--fs-h2); }
.fd-h3 { font-size: var(--fs-h3); }
.fd-h4 { font-size: var(--fs-h4); }
.fd-small { font-size: var(--fs-sm); color: var(--ink-2); }
.fd-muted { color: var(--muted); }
.fd-prose { max-inline-size: var(--measure); }
.fd-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.fd-eyebrow { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink); margin: 0; }

/* ---------- layout helpers ---------- */
.fd-stack { display: grid; gap: var(--space-4); }
.fd-stack-lg { display: grid; gap: var(--space-5); }
.fd-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- buttons ---------- */
.fd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--target);
  min-inline-size: var(--target);
  padding-block: var(--space-2);
  padding-inline: calc(var(--target) * 0.5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease-pop);
}
.fd-btn:active { transform: scale(0.97); }
[data-persona="teen-young"] { --ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1); --dur: 220ms; }
[data-persona="teen-young"] .fd-btn:hover { transform: translateY(-2px); }
.fd-btn:hover { background: color-mix(in oklch, var(--accent), var(--ink) 12%); }
.fd-btn:active { background: color-mix(in oklch, var(--accent), var(--ink) 20%); }
.fd-btn--soft { background: var(--accent-soft); color: var(--on-accent-soft); }
.fd-btn--soft:hover { background: color-mix(in oklch, var(--accent-soft), var(--ink) 8%); }
.fd-btn--second { background: var(--accent-2); color: var(--on-accent-2); }
.fd-btn--second:hover { background: color-mix(in oklch, var(--accent-2), var(--ink) 12%); }
.fd-btn--quiet { background: transparent; color: var(--accent-ink); border-color: var(--control-edge); }
.fd-btn--quiet:hover { background: var(--surface-2); }
.fd-btn:disabled, .fd-btn[aria-disabled="true"] {
  /* solid tokens instead of a fade: a faded pastel button was nearly invisible on the light personas */
  background: var(--surface-2);
  color: var(--ink-2);
  border-color: var(--control-edge);
  border-style: dashed;
  cursor: not-allowed;
  transform: none;
}

/* ---------- fields ---------- */
.fd-field { display: grid; gap: var(--space-1); max-inline-size: var(--measure); }
.fd-label { font-weight: 600; color: var(--ink); }
.fd-hint { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.fd-input {
  inline-size: 100%;
  min-block-size: var(--target);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-style: solid;
  border-width: 1px;
  border-color: var(--control-edge);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.fd-input::placeholder { color: var(--muted); opacity: 1; }
.fd-input:hover { border-color: var(--ink-2); }
.fd-input[aria-invalid="true"] { border-color: var(--danger-ink); border-width: 2px; }
.fd-error { color: var(--danger-ink); font-size: var(--fs-sm); margin: 0; font-weight: 600; }

/* ---------- card (use sparingly), progress, list, badge ---------- */
.fd-card {
  background: var(--surface);
  border-style: solid;
  border-width: 1px;
  border-color: var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.fd-card--tint-a { background: var(--tint-a); }
.fd-card--tint-b { background: var(--tint-b); }
.fd-progress {
  position: relative;
  block-size: calc(var(--target) * 0.3);
  min-block-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--control-edge);
  border-radius: 999px;
  overflow: hidden;
}
.fd-progress > span {
  display: block;
  block-size: 100%;
  inline-size: clamp(0%, calc(var(--value, 0) * 1%), 100%); /* a value over 100 can never run past the track */
  max-inline-size: 100%;
  background: var(--accent-ink);
  border-radius: inherit;
}
.fd-list { list-style: none; margin: 0; padding: 0; max-inline-size: var(--measure); }
.fd-list > li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--line);
}
.fd-list > li:last-child { border-block-end: 0; }
.fd-list .fd-mark { font-weight: 700; color: var(--accent-ink); min-inline-size: 1.5em; }
.fd-badge {
  display: inline-block;
  padding: 0.1em 0.7em;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--on-accent-soft);
  font-size: var(--fs-sm);
  font-weight: 650;
}
.fd-badge--2 { color: var(--accent-2-ink); background: var(--surface-2); }
.fd-ok { color: var(--success-ink); }
.fd-warn { color: var(--warn-ink); }
.fd-danger { color: var(--danger-ink); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-persona], [data-persona] *, [data-persona] *::before, [data-persona] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
[data-motion="reduced"], [data-motion="reduced"] * {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ---------- print ---------- */
@media print {
  [data-persona] { color-scheme: light !important; background: none; font-size: 12pt; }
  .fd-skip, .fd-noprint { display: none !important; }
  .fd-card { break-inside: avoid; border-color: currentColor; }
  .fd-btn { border: 1px solid currentColor; background: none; color: inherit; }
}

@supports not (color: light-dark(white, black)) {
  /* Older browsers (Safari below 17.5, Chrome below 123, Firefox below 120): plain hex values, light (-l) and dark (-d). */
  [data-persona="craig"] {
    --bg-l: #f2f5fb;
    --bg-d: #070b14;
    --surface-l: #fafcff;
    --surface-d: #111620;
    --surface-2-l: #e8ebf2;
    --surface-2-d: #1c222d;
    --ink-l: #12161f;
    --ink-d: #ebeef5;
    --ink-2-l: #3d424d;
    --ink-2-d: #b9bec8;
    --muted-l: #535864;
    --muted-d: #989fab;
    --line-l: #d4d7de;
    --line-d: #2d3340;
    --control-edge-l: #6c7587;
    --control-edge-d: #7d8699;
    --accent-l: #007343;
    --accent-d: #00ca85;
    --on-accent-l: #f5fcf8;
    --on-accent-d: #03130b;
    --accent-ink-l: #006338;
    --accent-ink-d: #43dd9a;
    --accent-soft-l: #d5f4e2;
    --accent-soft-d: #04321e;
    --on-accent-soft-l: #003821;
    --on-accent-soft-d: #c3f2d7;
    --success-ink-l: #005820;
    --success-ink-d: #6ed889;
    --warn-ink-l: #744200;
    --warn-ink-d: #ebbd57;
    --danger-ink-l: #970818;
    --danger-ink-d: #ff9189;
    --accent-2-l: #845000;
    --accent-2-d: #eebc4a;
    --on-accent-2-l: #fff9f3;
    --on-accent-2-d: #1c1505;
    --accent-2-ink-l: #724400;
    --accent-2-ink-d: #f1c45e;
    --tint-a-l: #e0f3f4;
    --tint-a-d: #0b2425;
    --tint-b-l: #f8edd8;
    --tint-b-d: #2a2009;
  }
  [data-persona="sasha"] {
    --bg-l: #fbf6ee;
    --bg-d: #16100e;
    --surface-l: #fffbf6;
    --surface-d: #231b18;
    --surface-2-l: #f4ece0;
    --surface-2-d: #302623;
    --ink-l: #201914;
    --ink-d: #f2eee7;
    --ink-2-l: #4b4038;
    --ink-2-d: #cbc3ba;
    --muted-l: #645850;
    --muted-d: #ada397;
    --line-l: #e0dad0;
    --line-d: #433831;
    --control-edge-l: #807262;
    --control-edge-d: #9a887a;
    --accent-l: #b6143a;
    --accent-d: #f87584;
    --on-accent-l: #fff8f8;
    --on-accent-d: #250e10;
    --accent-ink-l: #a8002f;
    --accent-ink-d: #ff9da5;
    --accent-soft-l: #ffe2e3;
    --accent-soft-d: #4b1d22;
    --on-accent-soft-l: #5b1620;
    --on-accent-soft-d: #fedadc;
    --success-ink-l: #005820;
    --success-ink-d: #6ed889;
    --warn-ink-l: #744200;
    --warn-ink-d: #ebbd57;
    --danger-ink-l: #970818;
    --danger-ink-d: #ff9189;
    --accent-2-l: #00673f;
    --accent-2-d: #53c48e;
    --on-accent-2-l: #f5fcf8;
    --on-accent-2-d: #05160d;
    --accent-2-ink-l: #005d39;
    --accent-2-ink-d: #71d6a3;
    --tint-a-l: #e1f5e4;
    --tint-a-d: #19281c;
    --tint-b-l: #fcf1d4;
    --tint-b-d: #2e250e;
  }
  [data-persona="amaya"] {
    --bg-l: #faf4ec;
    --bg-d: #1d162a;
    --surface-l: #fffbf6;
    --surface-d: #2a2139;
    --surface-2-l: #ece8fe;
    --surface-2-d: #372d49;
    --ink-l: #342742;
    --ink-d: #f0ecf7;
    --ink-2-l: #4e415e;
    --ink-2-d: #cdc7dc;
    --muted-l: #6a5c7b;
    --muted-d: #b1a9c4;
    --line-l: #dbd8e7;
    --line-d: #4c425f;
    --control-edge-l: #7d6c91;
    --control-edge-d: #988ab2;
    --accent-l: #f0799b;
    --accent-d: #f58ca9;
    --on-accent-l: #261736;
    --on-accent-d: #20142d;
    --accent-ink-l: #ae2059;
    --accent-ink-d: #ffa3bc;
    --accent-soft-l: #ece8fe;
    --accent-soft-d: #3e2f57;
    --on-accent-soft-l: #3b294f;
    --on-accent-soft-d: #eee7fd;
    --success-ink-l: #005820;
    --success-ink-d: #6ed889;
    --warn-ink-l: #744200;
    --warn-ink-d: #ebbd57;
    --danger-ink-l: #970818;
    --danger-ink-d: #ff9189;
    --accent-2-l: #714ca6;
    --accent-2-d: #c1a9ee;
    --on-accent-2-l: #fbf9ff;
    --on-accent-2-d: #231933;
    --accent-2-ink-l: #623e96;
    --accent-2-ink-d: #d3befd;
    --tint-a-l: #dbf6e7;
    --tint-a-d: #193429;
    --tint-b-l: #fcf2cd;
    --tint-b-d: #3d3212;
  }
  [data-persona="grandparent"] {
    --bg-l: #fcfaf6;
    --bg-d: #070b11;
    --surface-l: #fffdfa;
    --surface-d: #11161e;
    --surface-2-l: #f3f0e9;
    --surface-2-d: #1b222b;
    --ink-l: #050e1a;
    --ink-d: #f3f5f8;
    --ink-2-l: #1c2735;
    --ink-2-d: #dadee5;
    --muted-l: #333e4d;
    --muted-d: #bec5ce;
    --line-l: #c6cbd1;
    --line-d: #414853;
    --control-edge-l: #46576c;
    --control-edge-d: #98a6b8;
    --accent-l: #02468b;
    --accent-d: #71bfff;
    --on-accent-l: #fafcff;
    --on-accent-d: #040b18;
    --accent-ink-l: #004085;
    --accent-ink-d: #92d2ff;
    --accent-soft-l: #dbe9fc;
    --accent-soft-d: #182e4b;
    --on-accent-soft-l: #062142;
    --on-accent-soft-d: #e6effc;
    --success-ink-l: #004d15;
    --success-ink-d: #75df8f;
    --warn-ink-l: #6b3a00;
    --warn-ink-d: #f1c45e;
    --danger-ink-l: #8a0314;
    --danger-ink-d: #ff9890;
    --accent-2-l: #00555b;
    --accent-2-d: #64d1d7;
    --on-accent-2-l: #f8fdfd;
    --on-accent-2-d: #000f10;
    --accent-2-ink-l: #005055;
    --accent-2-ink-d: #82e0e5;
    --tint-a-l: #e1f5e4;
    --tint-a-d: #1c2b1f;
    --tint-b-l: #fef0d4;
    --tint-b-d: #322710;
  }
  [data-persona="teen"] {
    --bg-l: #f6f4fb;
    --bg-d: #0b0615;
    --surface-l: #fcfbff;
    --surface-d: #170f23;
    --surface-2-l: #ede8f7;
    --surface-2-d: #231a31;
    --ink-l: #1c172b;
    --ink-d: #f3f0f8;
    --ink-2-l: #443e56;
    --ink-2-d: #ccc8d6;
    --muted-l: #5c576f;
    --muted-d: #ada7bb;
    --line-l: #d9d5e3;
    --line-d: #3a334f;
    --control-edge-l: #776e94;
    --control-edge-d: #8e85ad;
    --accent-l: #8326c9;
    --accent-d: #b96aff;
    --on-accent-l: #fcf9ff;
    --on-accent-d: #0f091c;
    --accent-ink-l: #761ab7;
    --accent-ink-d: #d4a3ff;
    --accent-soft-l: #f1e5ff;
    --accent-soft-d: #3a1c55;
    --on-accent-soft-l: #3c165d;
    --on-accent-soft-d: #eee2fe;
    --success-ink-l: #005820;
    --success-ink-d: #6ed889;
    --warn-ink-l: #744200;
    --warn-ink-d: #ebbd57;
    --danger-ink-l: #970818;
    --danger-ink-d: #ff9189;
    --accent-2-l: #b10b69;
    --accent-2-d: #f85da5;
    --on-accent-2-l: #fff7fa;
    --on-accent-2-d: #1c0710;
    --accent-2-ink-l: #a3005e;
    --accent-2-ink-d: #ff96c2;
    --tint-a-l: #ffe7ea;
    --tint-a-d: #411b23;
    --tint-b-l: #d8f5f6;
    --tint-b-d: #052a2c;
  }
  [data-persona="teen-young"] {
    --bg-l: #eff6fb;
    --bg-d: #091d36;
    --surface-l: #f8fcff;
    --surface-d: #132946;
    --surface-2-l: #dfeef7;
    --surface-2-d: #1d3656;
    --ink-l: #101a2d;
    --ink-d: #edf2f8;
    --ink-2-l: #374358;
    --ink-2-d: #c4cfdb;
    --muted-l: #4f5b72;
    --muted-d: #a3b3c4;
    --line-l: #cbdae3;
    --line-d: #394863;
    --control-edge-l: #5e7791;
    --control-edge-d: #819bb7;
    --accent-l: #006c9d;
    --accent-d: #44bcf2;
    --on-accent-l: #f4fbff;
    --on-accent-d: #0c1628;
    --accent-ink-l: #005d8d;
    --accent-ink-d: #74d1ff;
    --accent-soft-l: #d5f0ff;
    --accent-soft-d: #043753;
    --on-accent-soft-l: #05304e;
    --on-accent-soft-d: #d8effc;
    --success-ink-l: #005820;
    --success-ink-d: #6ed889;
    --warn-ink-l: #744200;
    --warn-ink-d: #ebbd57;
    --danger-ink-l: #970818;
    --danger-ink-d: #ff9189;
    --accent-2-l: #bd0035;
    --accent-2-d: #ff4965;
    --on-accent-2-l: #fff8f8;
    --on-accent-2-d: #1e0709;
    --accent-2-ink-l: #ab002c;
    --accent-2-ink-d: #ff969d;
    --tint-a-l: #ffe5e8;
    --tint-a-d: #4e1923;
    --tint-b-l: #dbf3ff;
    --tint-b-d: #133144;
  }
  [data-theme="blush"] {
    --accent-l: #9a2a4f;
    --accent-d: #f3829f;
    --on-accent-l: #fff7f9;
    --on-accent-d: #1d0c10;
    --accent-ink-l: #8d1c45;
    --accent-ink-d: #ffa3ba;
    --accent-soft-l: #ffe2e8;
    --accent-soft-d: #46202a;
    --on-accent-soft-l: #4d1928;
    --on-accent-soft-d: #ffdde4;
  }
  [data-theme="terracotta"] {
    --accent-l: #9c3200;
    --accent-d: #f48a64;
    --on-accent-l: #fff8f5;
    --on-accent-d: #1d0d07;
    --accent-ink-l: #8f2500;
    --accent-ink-d: #ffa988;
    --accent-soft-l: #ffe4da;
    --accent-soft-d: #472215;
    --on-accent-soft-l: #4e1c0a;
    --on-accent-soft-d: #ffe0d4;
  }
  [data-theme="marbella"] {
    --accent-l: #006f82;
    --accent-d: #00c3d5;
    --on-accent-l: #f3fcfd;
    --on-accent-d: #001518;
    --accent-ink-l: #006376;
    --accent-ink-d: #4ddae9;
    --accent-soft-l: #d1f3f6;
    --accent-soft-d: #00363c;
    --on-accent-soft-l: #003841;
    --on-accent-soft-d: #caf0f5;
  }
  [data-theme="sage"] {
    --accent-l: #007026;
    --accent-d: #62c37a;
    --on-accent-l: #f6fcf7;
    --on-accent-d: #07150a;
    --accent-ink-l: #00641a;
    --accent-ink-d: #89da9b;
    --accent-soft-l: #dcf2df;
    --accent-soft-d: #14361d;
    --on-accent-soft-l: #033816;
    --on-accent-soft-d: #d6f0da;
  }
  [data-theme="plum"] {
    --accent-l: #873482;
    --accent-d: #dc89d5;
    --on-accent-l: #fef8fd;
    --on-accent-d: #190d18;
    --accent-ink-l: #7a2776;
    --accent-ink-d: #f0a7e9;
    --accent-soft-l: #f9e3f7;
    --accent-soft-d: #3e223c;
    --on-accent-soft-l: #431d41;
    --on-accent-soft-d: #f8dff5;
  }
  [data-theme="midnight"] {
    --accent-l: #3b51ae;
    --accent-d: #89a5ff;
    --on-accent-l: #f7faff;
    --on-accent-d: #0c111f;
    --accent-ink-l: #3245a1;
    --accent-ink-d: #a6c0ff;
    --accent-soft-l: #e2ebff;
    --accent-soft-d: #222c4c;
    --on-accent-soft-l: #1f2a56;
    --on-accent-soft-d: #dde7ff;
  }
  [data-persona="craig"] {
    --bg: var(--bg-d);
    --surface: var(--surface-d);
    --surface-2: var(--surface-2-d);
    --ink: var(--ink-d);
    --ink-2: var(--ink-2-d);
    --muted: var(--muted-d);
    --line: var(--line-d);
    --control-edge: var(--control-edge-d);
    --accent: var(--accent-d);
    --on-accent: var(--on-accent-d);
    --accent-ink: var(--accent-ink-d);
    --accent-soft: var(--accent-soft-d);
    --on-accent-soft: var(--on-accent-soft-d);
    --success-ink: var(--success-ink-d);
    --warn-ink: var(--warn-ink-d);
    --danger-ink: var(--danger-ink-d);
    --accent-2: var(--accent-2-d);
    --on-accent-2: var(--on-accent-2-d);
    --accent-2-ink: var(--accent-2-ink-d);
    --tint-a: var(--tint-a-d);
    --tint-b: var(--tint-b-d);
  }
  [data-persona="craig"][data-color-mode="light"] {
    --bg: var(--bg-l);
    --surface: var(--surface-l);
    --surface-2: var(--surface-2-l);
    --ink: var(--ink-l);
    --ink-2: var(--ink-2-l);
    --muted: var(--muted-l);
    --line: var(--line-l);
    --control-edge: var(--control-edge-l);
    --accent: var(--accent-l);
    --on-accent: var(--on-accent-l);
    --accent-ink: var(--accent-ink-l);
    --accent-soft: var(--accent-soft-l);
    --on-accent-soft: var(--on-accent-soft-l);
    --success-ink: var(--success-ink-l);
    --warn-ink: var(--warn-ink-l);
    --danger-ink: var(--danger-ink-l);
    --accent-2: var(--accent-2-l);
    --on-accent-2: var(--on-accent-2-l);
    --accent-2-ink: var(--accent-2-ink-l);
    --tint-a: var(--tint-a-l);
    --tint-b: var(--tint-b-l);
  }
  @media (prefers-color-scheme: light) {
    [data-persona="craig"][data-color-mode="auto"] {
    --bg: var(--bg-l);
    --surface: var(--surface-l);
    --surface-2: var(--surface-2-l);
    --ink: var(--ink-l);
    --ink-2: var(--ink-2-l);
    --muted: var(--muted-l);
    --line: var(--line-l);
    --control-edge: var(--control-edge-l);
    --accent: var(--accent-l);
    --on-accent: var(--on-accent-l);
    --accent-ink: var(--accent-ink-l);
    --accent-soft: var(--accent-soft-l);
    --on-accent-soft: var(--on-accent-soft-l);
    --success-ink: var(--success-ink-l);
    --warn-ink: var(--warn-ink-l);
    --danger-ink: var(--danger-ink-l);
    --accent-2: var(--accent-2-l);
    --on-accent-2: var(--on-accent-2-l);
    --accent-2-ink: var(--accent-2-ink-l);
    --tint-a: var(--tint-a-l);
    --tint-b: var(--tint-b-l);
    }
  }
  [data-persona="sasha"] {
    --bg: var(--bg-l);
    --surface: var(--surface-l);
    --surface-2: var(--surface-2-l);
    --ink: var(--ink-l);
    --ink-2: var(--ink-2-l);
    --muted: var(--muted-l);
    --line: var(--line-l);
    --control-edge: var(--control-edge-l);
    --accent: var(--accent-l);
    --on-accent: var(--on-accent-l);
    --accent-ink: var(--accent-ink-l);
    --accent-soft: var(--accent-soft-l);
    --on-accent-soft: var(--on-accent-soft-l);
    --success-ink: var(--success-ink-l);
    --warn-ink: var(--warn-ink-l);
    --danger-ink: var(--danger-ink-l);
    --accent-2: var(--accent-2-l);
    --on-accent-2: var(--on-accent-2-l);
    --accent-2-ink: var(--accent-2-ink-l);
    --tint-a: var(--tint-a-l);
    --tint-b: var(--tint-b-l);
  }
  [data-persona="sasha"][data-color-mode="dark"] {
    --bg: var(--bg-d);
    --surface: var(--surface-d);
    --surface-2: var(--surface-2-d);
    --ink: var(--ink-d);
    --ink-2: var(--ink-2-d);
    --muted: var(--muted-d);
    --line: var(--line-d);
    --control-edge: var(--control-edge-d);
    --accent: var(--accent-d);
    --on-accent: var(--on-accent-d);
    --accent-ink: var(--accent-ink-d);
    --accent-soft: var(--accent-soft-d);
    --on-accent-soft: var(--on-accent-soft-d);
    --success-ink: var(--success-ink-d);
    --warn-ink: var(--warn-ink-d);
    --danger-ink: var(--danger-ink-d);
    --accent-2: var(--accent-2-d);
    --on-accent-2: var(--on-accent-2-d);
    --accent-2-ink: var(--accent-2-ink-d);
    --tint-a: var(--tint-a-d);
    --tint-b: var(--tint-b-d);
  }
  @media (prefers-color-scheme: dark) {
    [data-persona="sasha"][data-color-mode="auto"] {
    --bg: var(--bg-d);
    --surface: var(--surface-d);
    --surface-2: var(--surface-2-d);
    --ink: var(--ink-d);
    --ink-2: var(--ink-2-d);
    --muted: var(--muted-d);
    --line: var(--line-d);
    --control-edge: var(--control-edge-d);
    --accent: var(--accent-d);
    --on-accent: var(--on-accent-d);
    --accent-ink: var(--accent-ink-d);
    --accent-soft: var(--accent-soft-d);
    --on-accent-soft: var(--on-accent-soft-d);
    --success-ink: var(--success-ink-d);
    --warn-ink: var(--warn-ink-d);
    --danger-ink: var(--danger-ink-d);
    --accent-2: var(--accent-2-d);
    --on-accent-2: var(--on-accent-2-d);
    --accent-2-ink: var(--accent-2-ink-d);
    --tint-a: var(--tint-a-d);
    --tint-b: var(--tint-b-d);
    }
  }
  [data-persona="amaya"] {
    --bg: var(--bg-l);
    --surface: var(--surface-l);
    --surface-2: var(--surface-2-l);
    --ink: var(--ink-l);
    --ink-2: var(--ink-2-l);
    --muted: var(--muted-l);
    --line: var(--line-l);
    --control-edge: var(--control-edge-l);
    --accent: var(--accent-l);
    --on-accent: var(--on-accent-l);
    --accent-ink: var(--accent-ink-l);
    --accent-soft: var(--accent-soft-l);
    --on-accent-soft: var(--on-accent-soft-l);
    --success-ink: var(--success-ink-l);
    --warn-ink: var(--warn-ink-l);
    --danger-ink: var(--danger-ink-l);
    --accent-2: var(--accent-2-l);
    --on-accent-2: var(--on-accent-2-l);
    --accent-2-ink: var(--accent-2-ink-l);
    --tint-a: var(--tint-a-l);
    --tint-b: var(--tint-b-l);
  }
  [data-persona="amaya"][data-color-mode="dark"] {
    --bg: var(--bg-d);
    --surface: var(--surface-d);
    --surface-2: var(--surface-2-d);
    --ink: var(--ink-d);
    --ink-2: var(--ink-2-d);
    --muted: var(--muted-d);
    --line: var(--line-d);
    --control-edge: var(--control-edge-d);
    --accent: var(--accent-d);
    --on-accent: var(--on-accent-d);
    --accent-ink: var(--accent-ink-d);
    --accent-soft: var(--accent-soft-d);
    --on-accent-soft: var(--on-accent-soft-d);
    --success-ink: var(--success-ink-d);
    --warn-ink: var(--warn-ink-d);
    --danger-ink: var(--danger-ink-d);
    --accent-2: var(--accent-2-d);
    --on-accent-2: var(--on-accent-2-d);
    --accent-2-ink: var(--accent-2-ink-d);
    --tint-a: var(--tint-a-d);
    --tint-b: var(--tint-b-d);
  }
  @media (prefers-color-scheme: dark) {
    [data-persona="amaya"][data-color-mode="auto"] {
    --bg: var(--bg-d);
    --surface: var(--surface-d);
    --surface-2: var(--surface-2-d);
    --ink: var(--ink-d);
    --ink-2: var(--ink-2-d);
    --muted: var(--muted-d);
    --line: var(--line-d);
    --control-edge: var(--control-edge-d);
    --accent: var(--accent-d);
    --on-accent: var(--on-accent-d);
    --accent-ink: var(--accent-ink-d);
    --accent-soft: var(--accent-soft-d);
    --on-accent-soft: var(--on-accent-soft-d);
    --success-ink: var(--success-ink-d);
    --warn-ink: var(--warn-ink-d);
    --danger-ink: var(--danger-ink-d);
    --accent-2: var(--accent-2-d);
    --on-accent-2: var(--on-accent-2-d);
    --accent-2-ink: var(--accent-2-ink-d);
    --tint-a: var(--tint-a-d);
    --tint-b: var(--tint-b-d);
    }
  }
  [data-persona="grandparent"] {
    --bg: var(--bg-l);
    --surface: var(--surface-l);
    --surface-2: var(--surface-2-l);
    --ink: var(--ink-l);
    --ink-2: var(--ink-2-l);
    --muted: var(--muted-l);
    --line: var(--line-l);
    --control-edge: var(--control-edge-l);
    --accent: var(--accent-l);
    --on-accent: var(--on-accent-l);
    --accent-ink: var(--accent-ink-l);
    --accent-soft: var(--accent-soft-l);
    --on-accent-soft: var(--on-accent-soft-l);
    --success-ink: var(--success-ink-l);
    --warn-ink: var(--warn-ink-l);
    --danger-ink: var(--danger-ink-l);
    --accent-2: var(--accent-2-l);
    --on-accent-2: var(--on-accent-2-l);
    --accent-2-ink: var(--accent-2-ink-l);
    --tint-a: var(--tint-a-l);
    --tint-b: var(--tint-b-l);
  }
  [data-persona="grandparent"][data-color-mode="dark"] {
    --bg: var(--bg-d);
    --surface: var(--surface-d);
    --surface-2: var(--surface-2-d);
    --ink: var(--ink-d);
    --ink-2: var(--ink-2-d);
    --muted: var(--muted-d);
    --line: var(--line-d);
    --control-edge: var(--control-edge-d);
    --accent: var(--accent-d);
    --on-accent: var(--on-accent-d);
    --accent-ink: var(--accent-ink-d);
    --accent-soft: var(--accent-soft-d);
    --on-accent-soft: var(--on-accent-soft-d);
    --success-ink: var(--success-ink-d);
    --warn-ink: var(--warn-ink-d);
    --danger-ink: var(--danger-ink-d);
    --accent-2: var(--accent-2-d);
    --on-accent-2: var(--on-accent-2-d);
    --accent-2-ink: var(--accent-2-ink-d);
    --tint-a: var(--tint-a-d);
    --tint-b: var(--tint-b-d);
  }
  @media (prefers-color-scheme: dark) {
    [data-persona="grandparent"][data-color-mode="auto"] {
    --bg: var(--bg-d);
    --surface: var(--surface-d);
    --surface-2: var(--surface-2-d);
    --ink: var(--ink-d);
    --ink-2: var(--ink-2-d);
    --muted: var(--muted-d);
    --line: var(--line-d);
    --control-edge: var(--control-edge-d);
    --accent: var(--accent-d);
    --on-accent: var(--on-accent-d);
    --accent-ink: var(--accent-ink-d);
    --accent-soft: var(--accent-soft-d);
    --on-accent-soft: var(--on-accent-soft-d);
    --success-ink: var(--success-ink-d);
    --warn-ink: var(--warn-ink-d);
    --danger-ink: var(--danger-ink-d);
    --accent-2: var(--accent-2-d);
    --on-accent-2: var(--on-accent-2-d);
    --accent-2-ink: var(--accent-2-ink-d);
    --tint-a: var(--tint-a-d);
    --tint-b: var(--tint-b-d);
    }
  }
  [data-persona="teen"] {
    --bg: var(--bg-d);
    --surface: var(--surface-d);
    --surface-2: var(--surface-2-d);
    --ink: var(--ink-d);
    --ink-2: var(--ink-2-d);
    --muted: var(--muted-d);
    --line: var(--line-d);
    --control-edge: var(--control-edge-d);
    --accent: var(--accent-d);
    --on-accent: var(--on-accent-d);
    --accent-ink: var(--accent-ink-d);
    --accent-soft: var(--accent-soft-d);
    --on-accent-soft: var(--on-accent-soft-d);
    --success-ink: var(--success-ink-d);
    --warn-ink: var(--warn-ink-d);
    --danger-ink: var(--danger-ink-d);
    --accent-2: var(--accent-2-d);
    --on-accent-2: var(--on-accent-2-d);
    --accent-2-ink: var(--accent-2-ink-d);
    --tint-a: var(--tint-a-d);
    --tint-b: var(--tint-b-d);
  }
  [data-persona="teen"][data-color-mode="light"] {
    --bg: var(--bg-l);
    --surface: var(--surface-l);
    --surface-2: var(--surface-2-l);
    --ink: var(--ink-l);
    --ink-2: var(--ink-2-l);
    --muted: var(--muted-l);
    --line: var(--line-l);
    --control-edge: var(--control-edge-l);
    --accent: var(--accent-l);
    --on-accent: var(--on-accent-l);
    --accent-ink: var(--accent-ink-l);
    --accent-soft: var(--accent-soft-l);
    --on-accent-soft: var(--on-accent-soft-l);
    --success-ink: var(--success-ink-l);
    --warn-ink: var(--warn-ink-l);
    --danger-ink: var(--danger-ink-l);
    --accent-2: var(--accent-2-l);
    --on-accent-2: var(--on-accent-2-l);
    --accent-2-ink: var(--accent-2-ink-l);
    --tint-a: var(--tint-a-l);
    --tint-b: var(--tint-b-l);
  }
  @media (prefers-color-scheme: light) {
    [data-persona="teen"][data-color-mode="auto"] {
    --bg: var(--bg-l);
    --surface: var(--surface-l);
    --surface-2: var(--surface-2-l);
    --ink: var(--ink-l);
    --ink-2: var(--ink-2-l);
    --muted: var(--muted-l);
    --line: var(--line-l);
    --control-edge: var(--control-edge-l);
    --accent: var(--accent-l);
    --on-accent: var(--on-accent-l);
    --accent-ink: var(--accent-ink-l);
    --accent-soft: var(--accent-soft-l);
    --on-accent-soft: var(--on-accent-soft-l);
    --success-ink: var(--success-ink-l);
    --warn-ink: var(--warn-ink-l);
    --danger-ink: var(--danger-ink-l);
    --accent-2: var(--accent-2-l);
    --on-accent-2: var(--on-accent-2-l);
    --accent-2-ink: var(--accent-2-ink-l);
    --tint-a: var(--tint-a-l);
    --tint-b: var(--tint-b-l);
    }
  }
  [data-persona="teen-young"] {
    --bg: var(--bg-d);
    --surface: var(--surface-d);
    --surface-2: var(--surface-2-d);
    --ink: var(--ink-d);
    --ink-2: var(--ink-2-d);
    --muted: var(--muted-d);
    --line: var(--line-d);
    --control-edge: var(--control-edge-d);
    --accent: var(--accent-d);
    --on-accent: var(--on-accent-d);
    --accent-ink: var(--accent-ink-d);
    --accent-soft: var(--accent-soft-d);
    --on-accent-soft: var(--on-accent-soft-d);
    --success-ink: var(--success-ink-d);
    --warn-ink: var(--warn-ink-d);
    --danger-ink: var(--danger-ink-d);
    --accent-2: var(--accent-2-d);
    --on-accent-2: var(--on-accent-2-d);
    --accent-2-ink: var(--accent-2-ink-d);
    --tint-a: var(--tint-a-d);
    --tint-b: var(--tint-b-d);
  }
  [data-persona="teen-young"][data-color-mode="light"] {
    --bg: var(--bg-l);
    --surface: var(--surface-l);
    --surface-2: var(--surface-2-l);
    --ink: var(--ink-l);
    --ink-2: var(--ink-2-l);
    --muted: var(--muted-l);
    --line: var(--line-l);
    --control-edge: var(--control-edge-l);
    --accent: var(--accent-l);
    --on-accent: var(--on-accent-l);
    --accent-ink: var(--accent-ink-l);
    --accent-soft: var(--accent-soft-l);
    --on-accent-soft: var(--on-accent-soft-l);
    --success-ink: var(--success-ink-l);
    --warn-ink: var(--warn-ink-l);
    --danger-ink: var(--danger-ink-l);
    --accent-2: var(--accent-2-l);
    --on-accent-2: var(--on-accent-2-l);
    --accent-2-ink: var(--accent-2-ink-l);
    --tint-a: var(--tint-a-l);
    --tint-b: var(--tint-b-l);
  }
  @media (prefers-color-scheme: light) {
    [data-persona="teen-young"][data-color-mode="auto"] {
    --bg: var(--bg-l);
    --surface: var(--surface-l);
    --surface-2: var(--surface-2-l);
    --ink: var(--ink-l);
    --ink-2: var(--ink-2-l);
    --muted: var(--muted-l);
    --line: var(--line-l);
    --control-edge: var(--control-edge-l);
    --accent: var(--accent-l);
    --on-accent: var(--on-accent-l);
    --accent-ink: var(--accent-ink-l);
    --accent-soft: var(--accent-soft-l);
    --on-accent-soft: var(--on-accent-soft-l);
    --success-ink: var(--success-ink-l);
    --warn-ink: var(--warn-ink-l);
    --danger-ink: var(--danger-ink-l);
    --accent-2: var(--accent-2-l);
    --on-accent-2: var(--on-accent-2-l);
    --accent-2-ink: var(--accent-2-ink-l);
    --tint-a: var(--tint-a-l);
    --tint-b: var(--tint-b-l);
    }
  }
  /* A wrapper that sets only data-theme (no data-persona of its own) still needs its accent mapped to the plain hex pair. */
  [data-theme]:not([data-persona]) {
    --accent: var(--accent-l);
    --on-accent: var(--on-accent-l);
    --accent-ink: var(--accent-ink-l);
    --accent-soft: var(--accent-soft-l);
    --on-accent-soft: var(--on-accent-soft-l);
  }
  [data-scheme="dark"] [data-theme]:not([data-persona]) {
    --accent: var(--accent-d);
    --on-accent: var(--on-accent-d);
    --accent-ink: var(--accent-ink-d);
    --accent-soft: var(--accent-soft-d);
    --on-accent-soft: var(--on-accent-soft-d);
  }
}