:root {
  /* ---- Typography ------------------------------------------------------
     Platform system font first (skill §15: it already ships optical sizing
     and tracking tables); self-hosted Inter is the fallback for platforms
     without a refined system face. Display and body share the same stack —
     hierarchy comes from weight/size/tracking, not a second imported family. */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Inter, Roboto, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Inter, Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;

  /* ---- Radii (generous, "continuous corner" feel) -------------------------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Spacing scale (4px base) ------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Layout -------------------------------------------------------------- */
  --sidebar-width: 264px;
  --sidebar-mini: 78px;
  --topbar-height: 64px;
  --content-max: 1280px;
  --prose-max: 70ch;

  /* ---- Motion ---------------------------------------------------------
     Kept for plain colour/opacity/hover transitions (still fine per the
     skill — springs are reserved for gesture-driven and materialize
     moments, wired in JS via scripts/motion.js, not here). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;   /* button press / micro */
  --dur-2: 180ms;   /* hover / dropdown */
  --dur-3: 240ms;   /* panels */
  --dur-4: 300ms;   /* modal / drawer */

  /* Modal/sheet dimming veil — deliberately theme-independent (a scrim reads
     the same "dim the background" regardless of light/dark canvas). */
  --scrim: rgba(0, 0, 0, 0.5);
  --scrim-blur: 4px;

  /* ---- Z-index scale ------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 20;
  --z-dropdown: 60;
  --z-sidebar: 140;
  --z-backdrop: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-tooltip: 1500;

  /* ======================================================================== */
  /* DARK THEME (default)                                                      */
  /* ======================================================================== */

  /* Canvas & surfaces — elevation reads lighter as it rises off the true-black
     canvas (macOS/iOS dark-mode convention), not darker. */
  --bg: #0b0b0d;
  --bg-tint: none;
  --surface: #1c1c1e;
  --surface-2: #232325;
  --surface-3: #2c2c2e;
  --surface-inset: #141416;
  --surface-glass: rgba(28, 28, 30, 0.72);

  /* Borders / hairlines */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --ring-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* Text */
  --text: #f5f5f7;
  --text-muted: #98989d;
  --text-subtle: #6e6e73;
  --text-on-accent: #ffffff;

  /* Brand accent — systemBlue */
  --accent: #0a84ff;
  --accent-strong: #409cff;
  --accent-quiet: #0071e3;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --accent-border: rgba(10, 132, 255, 0.4);

  /* Secondary accent — systemRed (used sparingly) */
  --coral: #ff453a;
  --coral-soft: rgba(255, 69, 58, 0.14);

  /* Semantic states */
  --success: #30d158;
  --success-soft: rgba(48, 209, 88, 0.14);
  --success-text: #63e184;
  --danger: #ff453a;
  --danger-soft: rgba(255, 69, 58, 0.14);
  --danger-text: #ff7a70;
  --warn: #ff9f0a;
  --warn-soft: rgba(255, 159, 10, 0.14);
  --warn-text: #ffb340;
  --info: #64d2ff;
  --info-soft: rgba(100, 210, 255, 0.14);
  --info-text: #8adcff;
  --purple-soft: rgba(191, 90, 242, 0.16);
  --purple-text: #d0a6ff;

  /* Focus */
  --focus: #409cff;
  --focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.35);

  /* Elevation — soft, diffuse, larger blur radius than a hard drop shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.55), 0 8px 22px rgba(0, 0, 0, 0.35);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 38px rgba(10, 132, 255, 0.22);

  /* Translucent "material" pairs (background alpha + blur radius) — thin for
     floating chrome that sits directly over content (popovers, tooltips,
     dropdowns), regular/thick for heavier sheets and modal dialogs. */
  --material-thin-bg: rgba(44, 44, 46, 0.6);
  --material-thin-blur: 20px;
  --material-regular-bg: rgba(28, 28, 30, 0.78);
  --material-regular-blur: 26px;
  --material-thick-bg: rgba(20, 20, 22, 0.9);
  --material-thick-blur: 34px;

  /* Sidebar — deliberately the heaviest, darkest structural material,
     independent of theme (it never overlaps scrolling content). */
  --sidebar-bg: #000000;
  --sidebar-text: #d1d1d6;
  --sidebar-text-muted: #86868b;
  --sidebar-active-bg: rgba(10, 132, 255, 0.18);
  --sidebar-active-text: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);

  /* Chart (read by JS canvas) */
  --chart-line: #0a84ff;
  --chart-fill: rgba(10, 132, 255, 0.16);
  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-axis: #6e6e73;

  color-scheme: dark;
}

/* ========================================================================== */
/* LIGHT THEME                                                                */
/* ========================================================================== */

:root[data-theme="light"] {
  --bg: #f2f2f7;
  --bg-tint: none;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f2f2f7;
  --surface-inset: #e9e9ee;
  --surface-glass: rgba(255, 255, 255, 0.78);

  --border: #e5e5ea;
  --border-strong: #d1d1d6;
  --border-subtle: #ececf1;
  --ring-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --text: #1c1c1e;
  --text-muted: #6e6e73;
  --text-subtle: #8e8e93;
  --text-on-accent: #ffffff;

  --accent: #007aff;
  --accent-strong: #0060cc;
  --accent-quiet: #007aff;
  --accent-soft: rgba(0, 122, 255, 0.12);
  --accent-border: rgba(0, 122, 255, 0.34);

  --coral: #ff3b30;
  --coral-soft: rgba(255, 59, 48, 0.1);

  --success: #34c759;
  --success-soft: rgba(52, 199, 89, 0.12);
  --success-text: #1f8b3b;
  --danger: #ff3b30;
  --danger-soft: rgba(255, 59, 48, 0.1);
  --danger-text: #c6291d;
  --warn: #ff9500;
  --warn-soft: rgba(255, 149, 0, 0.12);
  --warn-text: #b5690a;
  --info: #32ade6;
  --info-soft: rgba(50, 173, 230, 0.12);
  --info-text: #1d7aa3;
  --purple-soft: rgba(175, 82, 222, 0.11);
  --purple-text: #7d3fbf;

  --focus: #0060cc;
  --focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.26);

  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.06);
  --shadow-md: 0 10px 28px rgba(20, 20, 30, 0.08);
  --shadow-lg: 0 26px 60px rgba(20, 20, 30, 0.13);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 34px rgba(0, 122, 255, 0.16);

  --material-thin-bg: rgba(255, 255, 255, 0.6);
  --material-thin-blur: 20px;
  --material-regular-bg: rgba(255, 255, 255, 0.78);
  --material-regular-blur: 26px;
  --material-thick-bg: rgba(242, 242, 247, 0.92);
  --material-thick-blur: 34px;

  --sidebar-bg: #1c1c1e;
  --sidebar-text: #d1d1d6;
  --sidebar-text-muted: #86868b;
  --sidebar-active-bg: rgba(10, 132, 255, 0.18);
  --sidebar-active-text: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);

  --chart-line: #007aff;
  --chart-fill: rgba(0, 122, 255, 0.12);
  --chart-grid: rgba(20, 20, 30, 0.07);
  --chart-axis: #8e8e93;

  color-scheme: light;
}

/* Honour OS preference only when the user hasn't explicitly chosen a theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg: #f2f2f7;
    --bg-tint: none;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #f2f2f7;
    --surface-inset: #e9e9ee;
    --surface-glass: rgba(255, 255, 255, 0.78);
    --border: #e5e5ea;
    --border-strong: #d1d1d6;
    --border-subtle: #ececf1;
    --ring-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --text: #1c1c1e;
    --text-muted: #6e6e73;
    --text-subtle: #8e8e93;
    --text-on-accent: #ffffff;
    --accent: #007aff;
    --accent-strong: #0060cc;
    --accent-quiet: #007aff;
    --accent-soft: rgba(0, 122, 255, 0.12);
    --accent-border: rgba(0, 122, 255, 0.34);
    --coral: #ff3b30;
    --coral-soft: rgba(255, 59, 48, 0.1);
    --success: #34c759;
    --success-soft: rgba(52, 199, 89, 0.12);
    --success-text: #1f8b3b;
    --danger: #ff3b30;
    --danger-soft: rgba(255, 59, 48, 0.1);
    --danger-text: #c6291d;
    --warn: #ff9500;
    --warn-soft: rgba(255, 149, 0, 0.12);
    --warn-text: #b5690a;
    --info: #32ade6;
    --info-soft: rgba(50, 173, 230, 0.12);
    --info-text: #1d7aa3;
    --purple-soft: rgba(175, 82, 222, 0.11);
    --purple-text: #7d3fbf;
    --focus: #0060cc;
    --focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.26);
    --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.06);
    --shadow-md: 0 10px 28px rgba(20, 20, 30, 0.08);
    --shadow-lg: 0 26px 60px rgba(20, 20, 30, 0.13);
    --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 34px rgba(0, 122, 255, 0.16);
    --material-thin-bg: rgba(255, 255, 255, 0.6);
    --material-thin-blur: 20px;
    --material-regular-bg: rgba(255, 255, 255, 0.78);
    --material-regular-blur: 26px;
    --material-thick-bg: rgba(242, 242, 247, 0.92);
    --material-thick-blur: 34px;
    --sidebar-bg: #1c1c1e;
    --sidebar-text: #d1d1d6;
    --sidebar-text-muted: #86868b;
    --sidebar-active-bg: rgba(10, 132, 255, 0.18);
    --sidebar-active-text: #ffffff;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --chart-line: #007aff;
    --chart-fill: rgba(0, 122, 255, 0.12);
    --chart-grid: rgba(20, 20, 30, 0.07);
    --chart-axis: #8e8e93;
    color-scheme: light;
  }
}

/* ========================================================================== */
/* ACCENT (PRIMARY COLOUR) OVERRIDES                                          */
/* -------------------------------------------------------------------------- */
/* User-selectable accent colour, remapped to iOS/macOS system-colour hues.   */
/* The base tokens above ship the default systemBlue, so `blue` needs no      */
/* override. Each accent re-points only the accent-derived tokens, leaving    */
/* canvas/text/surfaces untouched so it composes with both themes. Dark       */
/* values come first; the light theme gets its own darker/quieter set for     */
/* contrast on light surfaces.                                                */
/* ========================================================================== */

/* ---- Violet -> systemPurple ------------------------------------------------ */
:root[data-accent="violet"] {
  --accent: #bf5af2;
  --accent-strong: #d18af5;
  --accent-quiet: #a845db;
  --accent-soft: rgba(191, 90, 242, 0.16);
  --accent-border: rgba(191, 90, 242, 0.36);
  --text-on-accent: #ffffff;
  --focus: #d18af5;
  --focus-ring: 0 0 0 3px rgba(191, 90, 242, 0.34);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 40px rgba(191, 90, 242, 0.2);
  --sidebar-active-bg: rgba(191, 90, 242, 0.18);
  --chart-line: #bf5af2;
  --chart-fill: rgba(191, 90, 242, 0.16);
}
:root[data-theme="light"][data-accent="violet"] {
  --accent: #af52de;
  --accent-strong: #8e3fb5;
  --accent-quiet: #af52de;
  --accent-soft: rgba(175, 82, 222, 0.12);
  --accent-border: rgba(175, 82, 222, 0.34);
  --text-on-accent: #ffffff;
  --focus: #8e3fb5;
  --focus-ring: 0 0 0 3px rgba(175, 82, 222, 0.26);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 36px rgba(175, 82, 222, 0.16);
  --sidebar-active-bg: rgba(191, 90, 242, 0.2);
  --chart-line: #af52de;
  --chart-fill: rgba(175, 82, 222, 0.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"])[data-accent="violet"] {
    --accent: #af52de;
    --accent-strong: #8e3fb5;
    --accent-quiet: #af52de;
    --accent-soft: rgba(175, 82, 222, 0.12);
    --accent-border: rgba(175, 82, 222, 0.34);
    --text-on-accent: #ffffff;
    --focus: #8e3fb5;
    --focus-ring: 0 0 0 3px rgba(175, 82, 222, 0.26);
    --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 36px rgba(175, 82, 222, 0.16);
    --sidebar-active-bg: rgba(191, 90, 242, 0.2);
    --chart-line: #af52de;
    --chart-fill: rgba(175, 82, 222, 0.12);
  }
}

/* ---- Emerald -> systemGreen ------------------------------------------------ */
:root[data-accent="emerald"] {
  --accent: #30d158;
  --accent-strong: #5ee37e;
  --accent-quiet: #22b34a;
  --accent-soft: rgba(48, 209, 88, 0.16);
  --accent-border: rgba(48, 209, 88, 0.36);
  --text-on-accent: #04230f;
  --focus: #5ee37e;
  --focus-ring: 0 0 0 3px rgba(48, 209, 88, 0.34);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 40px rgba(48, 209, 88, 0.2);
  --sidebar-active-bg: rgba(48, 209, 88, 0.18);
  --chart-line: #30d158;
  --chart-fill: rgba(48, 209, 88, 0.16);
}
:root[data-theme="light"][data-accent="emerald"] {
  --accent: #34c759;
  --accent-strong: #248a3d;
  --accent-quiet: #34c759;
  --accent-soft: rgba(52, 199, 89, 0.12);
  --accent-border: rgba(52, 199, 89, 0.34);
  --text-on-accent: #ffffff;
  --focus: #248a3d;
  --focus-ring: 0 0 0 3px rgba(52, 199, 89, 0.26);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 36px rgba(52, 199, 89, 0.16);
  --sidebar-active-bg: rgba(48, 209, 88, 0.2);
  --chart-line: #34c759;
  --chart-fill: rgba(52, 199, 89, 0.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"])[data-accent="emerald"] {
    --accent: #34c759;
    --accent-strong: #248a3d;
    --accent-quiet: #34c759;
    --accent-soft: rgba(52, 199, 89, 0.12);
    --accent-border: rgba(52, 199, 89, 0.34);
    --text-on-accent: #ffffff;
    --focus: #248a3d;
    --focus-ring: 0 0 0 3px rgba(52, 199, 89, 0.26);
    --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 36px rgba(52, 199, 89, 0.16);
    --sidebar-active-bg: rgba(48, 209, 88, 0.2);
    --chart-line: #34c759;
    --chart-fill: rgba(52, 199, 89, 0.12);
  }
}

/* ---- Rose -> systemPink ----------------------------------------------------- */
:root[data-accent="rose"] {
  --accent: #ff375f;
  --accent-strong: #ff6482;
  --accent-quiet: #e01947;
  --accent-soft: rgba(255, 55, 95, 0.16);
  --accent-border: rgba(255, 55, 95, 0.36);
  --text-on-accent: #ffffff;
  --focus: #ff6482;
  --focus-ring: 0 0 0 3px rgba(255, 55, 95, 0.34);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 40px rgba(255, 55, 95, 0.2);
  --sidebar-active-bg: rgba(255, 55, 95, 0.18);
  --chart-line: #ff375f;
  --chart-fill: rgba(255, 55, 95, 0.16);
}
:root[data-theme="light"][data-accent="rose"] {
  --accent: #ff2d55;
  --accent-strong: #d30f3b;
  --accent-quiet: #ff2d55;
  --accent-soft: rgba(255, 45, 85, 0.11);
  --accent-border: rgba(255, 45, 85, 0.34);
  --text-on-accent: #ffffff;
  --focus: #d30f3b;
  --focus-ring: 0 0 0 3px rgba(255, 45, 85, 0.24);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 36px rgba(255, 45, 85, 0.15);
  --sidebar-active-bg: rgba(255, 55, 95, 0.2);
  --chart-line: #ff2d55;
  --chart-fill: rgba(255, 45, 85, 0.11);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"])[data-accent="rose"] {
    --accent: #ff2d55;
    --accent-strong: #d30f3b;
    --accent-quiet: #ff2d55;
    --accent-soft: rgba(255, 45, 85, 0.11);
    --accent-border: rgba(255, 45, 85, 0.34);
    --text-on-accent: #ffffff;
    --focus: #d30f3b;
    --focus-ring: 0 0 0 3px rgba(255, 45, 85, 0.24);
    --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 36px rgba(255, 45, 85, 0.15);
    --sidebar-active-bg: rgba(255, 55, 95, 0.2);
    --chart-line: #ff2d55;
    --chart-fill: rgba(255, 45, 85, 0.11);
  }
}

/* ---- Amber -> systemOrange -------------------------------------------------- */
:root[data-accent="amber"] {
  --accent: #ff9f0a;
  --accent-strong: #ffb340;
  --accent-quiet: #e08600;
  --accent-soft: rgba(255, 159, 10, 0.16);
  --accent-border: rgba(255, 159, 10, 0.38);
  --text-on-accent: #2b1700;
  --focus: #ffb340;
  --focus-ring: 0 0 0 3px rgba(255, 159, 10, 0.34);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 40px rgba(255, 159, 10, 0.2);
  --sidebar-active-bg: rgba(255, 159, 10, 0.18);
  --chart-line: #ff9f0a;
  --chart-fill: rgba(255, 159, 10, 0.16);
}
:root[data-theme="light"][data-accent="amber"] {
  --accent: #ff9500;
  --accent-strong: #c97400;
  --accent-quiet: #ff9500;
  --accent-soft: rgba(255, 149, 0, 0.12);
  --accent-border: rgba(255, 149, 0, 0.34);
  --text-on-accent: #ffffff;
  --focus: #c97400;
  --focus-ring: 0 0 0 3px rgba(255, 149, 0, 0.26);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 36px rgba(255, 149, 0, 0.16);
  --sidebar-active-bg: rgba(255, 159, 10, 0.22);
  --chart-line: #ff9500;
  --chart-fill: rgba(255, 149, 0, 0.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"])[data-accent="amber"] {
    --accent: #ff9500;
    --accent-strong: #c97400;
    --accent-quiet: #ff9500;
    --accent-soft: rgba(255, 149, 0, 0.12);
    --accent-border: rgba(255, 149, 0, 0.34);
    --text-on-accent: #ffffff;
    --focus: #c97400;
    --focus-ring: 0 0 0 3px rgba(255, 149, 0, 0.26);
    --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 36px rgba(255, 149, 0, 0.16);
    --sidebar-active-bg: rgba(255, 159, 10, 0.22);
    --chart-line: #ff9500;
    --chart-fill: rgba(255, 149, 0, 0.12);
  }
}

/* ---- Gray -> systemGray (neutral) ------------------------------------------- */
:root[data-accent="gray"] {
  --accent: #98989d;
  --accent-strong: #c7c7cc;
  --accent-quiet: #86868b;
  --accent-soft: rgba(152, 152, 157, 0.16);
  --accent-border: rgba(152, 152, 157, 0.34);
  --text-on-accent: #101014;
  --focus: #c7c7cc;
  --focus-ring: 0 0 0 3px rgba(152, 152, 157, 0.32);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 40px rgba(152, 152, 157, 0.16);
  --sidebar-active-bg: rgba(152, 152, 157, 0.16);
  --chart-line: #98989d;
  --chart-fill: rgba(152, 152, 157, 0.16);
}
:root[data-theme="light"][data-accent="gray"] {
  --accent: #636366;
  --accent-strong: #48484a;
  --accent-quiet: #636366;
  --accent-soft: rgba(99, 99, 102, 0.1);
  --accent-border: rgba(99, 99, 102, 0.3);
  --text-on-accent: #ffffff;
  --focus: #48484a;
  --focus-ring: 0 0 0 3px rgba(99, 99, 102, 0.22);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 36px rgba(99, 99, 102, 0.14);
  --sidebar-active-bg: rgba(152, 152, 157, 0.2);
  --chart-line: #636366;
  --chart-fill: rgba(99, 99, 102, 0.1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"])[data-accent="gray"] {
    --accent: #636366;
    --accent-strong: #48484a;
    --accent-quiet: #636366;
    --accent-soft: rgba(99, 99, 102, 0.1);
    --accent-border: rgba(99, 99, 102, 0.3);
    --text-on-accent: #ffffff;
    --focus: #48484a;
    --focus-ring: 0 0 0 3px rgba(99, 99, 102, 0.22);
    --glow-accent: 0 0 0 1px var(--accent-border), 0 14px 36px rgba(99, 99, 102, 0.14);
    --sidebar-active-bg: rgba(152, 152, 157, 0.2);
    --chart-line: #636366;
    --chart-fill: rgba(99, 99, 102, 0.1);
  }
}

/* ========================================================================== */
/* ACCESSIBILITY OVERRIDES — applied globally, independent of theme/accent    */
/* ========================================================================== */

/* Higher-contrast surfaces: near-solid backgrounds + a defined border instead
   of soft translucent tints (skill §14). */
@media (prefers-contrast: more) {
  :root {
    --border: var(--border-strong);
    --border-subtle: var(--border-strong);
    --surface-glass: var(--surface-2);
    --material-thin-bg: var(--surface-2);
    --material-regular-bg: var(--surface-2);
    --material-thick-bg: var(--surface-2);
  }
}

/* Frostier/solid instead of blurred (skill §14): every backdrop-filter in the
   codebase reads its blur radius from these --material-*-blur tokens, so
   zeroing them here turns every translucent surface solid in one place
   without touching each component's CSS individually. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --surface-glass: var(--surface-2);
    --material-thin-bg: var(--surface-2);
    --material-thin-blur: 0px;
    --material-regular-bg: var(--surface-2);
    --material-regular-blur: 0px;
    --material-thick-bg: var(--surface-2);
    --material-thick-blur: 0px;
    --scrim-blur: 0px;
  }
}