/* ── Design System: Studio Production ─────────────────────────── */
/* Dark flat grey theme with copper accent for video production    */

/* Hide x-cloak elements before Alpine initializes */
[x-cloak] { display: none !important; }

/* ── Brand Fonts: Perimeter Church ───────────────────────────── */
@font-face {
  font-family: 'Freight DispPro';
  src: url('/static/fonts/Freight-Display_Pro_Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Freight DispPro';
  src: url('/static/fonts/Freight-Display_Pro_Book_Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Freight DispPro';
  src: url('/static/fonts/Freight-Display_Pro_Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('/static/fonts/SweetSansPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('/static/fonts/SweetSansPro-Heavy.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Literata — the Desk's and Social's display face, self-hosted exactly as
   frontend-shared/theme.css declares it, for the Cadence palette below. */
@font-face {
  font-family: 'Literata';
  src: url('/static/fonts/Literata-var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/static/fonts/Literata-Italic-var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* --app-height: set by JS on iOS from visualViewport — on PWA cold start
     the layout viewport (and 100dvh with it) can be stale-short until a
     scroll gesture forces a recompute; visualViewport is right immediately. */
  height: var(--app-height, 100dvh);
  /* Reserve scrollbar space so slider drags / modal opens don't shift layout. */
  scrollbar-gutter: stable;
}
body {
  height: var(--app-height, 100dvh);
  margin: 0;
  overscroll-behavior: none;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

/* ── CSS Variables ────────────────────────────────────────────── */
:root {
  /* Typography — swap via --font-heading and --font-body */
  --font-heading: 'DM Sans', -apple-system, system-ui, sans-serif;
  --font-body: 'Source Serif 4', 'Georgia', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --font-ui: 'DM Sans', -apple-system, system-ui, sans-serif;

  /* Spacing scale */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;
  --sp-3xl: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Layout */
  --nav-height: 64px;
  --header-height: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Chrome (header/bottom-nav) tokens — base defaults; themes override */
  --chrome-bg: var(--header-bg);
  --chrome-fg: var(--text-primary);
  --chrome-fg-muted: var(--text-muted);
  --chrome-border: var(--glass-border);
  --chrome-accent: var(--accent);

  /* Accent — muted copper (shared across themes) */
  --accent: #b5725a;
  --accent-rgb: 181, 114, 90;
  --accent-soft: rgba(181, 114, 90, 0.15);
  --accent-glow: rgba(181, 114, 90, 0.25);
  --accent-hover: #c4826a;
  --accent-text: #d4927a;
  /* Foreground color to place ON --accent (contrast-checked per theme below).
     This value is overridden by the :root, [data-theme="dark"] block further
     down (same effective default) — kept in sync here for clarity. White
     measured 3.80:1 against this accent, below the 4.5:1 floor; dark bg
     tone measures 4.76:1. */
  --accent-on: #161616;

  /* Semantic colors */
  --error: #e53e3e;
  --warning: #e8a838;
  --success: #4caf50;

  /* Sunday / service air-date accent — warm gold, distinct from the
     green/yellow/red deadline-urgency glow so both can read at once on a card. */
  --sunday-accent: #f0a94b;
  --sunday-accent-text: #f7c479;

  /* Blur scale */
  --blur-xs: 4px;
  --blur-sm: 10px;
  --blur-md: 12px;
  --blur-lg: 20px;
  --blur-xl: 24px;

  /* Inverse text (for buttons/badges on solid backgrounds) */
  --text-inverse: #ffffff;

  /* Capacity status colors */
  --capacity-available: #78b478;
  --capacity-busy: #60BBE9;
  --capacity-full: var(--error);

  /* Calendar event colors */
  --event-color-1: #60a5fa;
  --event-color-2: #a78bfa;
  --event-color-3: #ab8fd2;

  /* Canvas */
  --canvas-bg: #1e1e1e;

  /* Button heights */
  --btn-height-xs: 28px;
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --btn-height-icon: 36px;

  /* Radius — additional small values for bars/pips */
  --radius-xs: 4px;
  --radius-pip: 3px;

  /* Overlay/backdrop */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --overlay-bg-light: rgba(0, 0, 0, 0.3);

  /* Alias tokens — referenced across pages.css / components.css */
  --border: var(--glass-border);
  --border-primary: var(--glass-border);
  --surface-border: var(--glass-border);
  --surface-alt: var(--glass-bg);
  --surface-hover: var(--glass-bg-hover);
  --bg-elevated: var(--bg-secondary);
  --accent-color: var(--accent);
  --accent-primary: var(--accent);
  --danger: var(--severity-critical);
  --info: var(--severity-insight);
  --text-tertiary: var(--text-muted);
  --color-warning: var(--warning);
  --color-error: var(--error);
}

/* Mobile: bump icon-button size to meet 44px iOS tap-target guideline.
   Desktop keeps 36px because pointer precision is finer. */
@media (max-width: 768px) {
  :root {
    --btn-height-icon: 44px;
  }
}

/* ── Dark Theme (default) ────────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg-primary: #161616;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #1a1a1a;

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-bg-active: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --glass-blur: 20px;

  /* Liquid glass highlights */
  --glass-specular: rgba(255, 255, 255, 0.06);
  --glass-specular-edge: rgba(255, 255, 255, 0.0);
  --glass-caustic: rgba(255, 255, 255, 0.03);
  --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-depth-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
  --glass-glare-color: rgba(255, 255, 255, 0.07);

  --header-bg: rgba(30, 30, 30, 0.9);
  --nav-bg: rgba(30, 30, 30, 0.95);

  --accent-rgb: 181, 114, 90;
  /* #ffffff measured 3.80:1 on --accent (#b5725a) — below the 4.5:1 floor.
     Swapped for --bg-primary's near-black tone, which measures 4.76:1. */
  --accent-on: #161616;

  --stage-forecast: #8a8fa0;
  --stage-intake: #9a8aa5;
  --stage-preproduction: #a59a82;
  --stage-production: #a58282;
  --stage-post: #82a59a;
  --stage-review: #a5a582;
  --stage-completion: #82a582;

  --severity-critical: #d45d5d;
  --severity-warning: #d4a04d;
  --severity-watch: #d4c44d;
  --severity-insight: #5d8fb5;

  --text-primary: #e8e8e8;
  --text-secondary: #999999;
  /* #5a5a5a measured 2.62:1 on this bg — lightened to clear the 3:1 floor
     while staying well below --text-secondary's contrast. */
  --text-muted: #6a6a6a;
  --text-accent: var(--accent-text);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 0 20px var(--accent-glow);

  --scrollbar-thumb: rgba(255, 255, 255, 0.08);
  --scrollbar-hover: rgba(255, 255, 255, 0.16);

  /* Chrome tokens (app-header / bottom-nav) — this theme has no dedicated
     chrome override block, so these just mirror the unscoped base rules
     (var(--header-bg), var(--text-primary), etc.) for consistency with
     themes that DO override chrome (asana, perimeter). */
  --chrome-bg: var(--header-bg);
  --chrome-fg: var(--text-primary);
  --chrome-fg-muted: var(--text-muted);
  --chrome-border: var(--glass-border);
  --chrome-accent: var(--accent);

  color-scheme: dark;
}

/* ── Light Theme ─────────────────────────────────────────────── */
/* MUST mirror the @media (prefers-color-scheme: light) [data-theme="system"]
   block below exactly — update both together. */
[data-theme="light"] {
  --bg-primary: #ece5dc;
  --bg-secondary: #e2d9cf;
  --bg-tertiary: #e7ded5;

  --glass-bg: rgba(255, 252, 248, 0.55);
  --glass-bg-hover: rgba(255, 252, 248, 0.72);
  --glass-bg-active: rgba(255, 252, 248, 0.88);
  --glass-border: rgba(120, 90, 60, 0.1);
  --glass-border-hover: rgba(120, 90, 60, 0.18);
  --glass-blur: 20px;

  /* Liquid glass highlights (light) */
  --glass-specular: rgba(255, 255, 255, 0.45);
  --glass-specular-edge: rgba(255, 255, 255, 0.0);
  --glass-caustic: rgba(255, 255, 255, 0.2);
  --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-depth-shadow: 0 1px 2px rgba(80, 50, 20, 0.06), 0 4px 16px rgba(80, 50, 20, 0.08);
  --glass-glare-color: rgba(255, 255, 255, 0.18);

  --header-bg: rgba(236, 229, 220, 0.92);
  --nav-bg: rgba(236, 229, 220, 0.95);

  --accent-rgb: 181, 114, 90;
  /* #ffffff measured 3.80:1 on --accent (#b5725a) — below the 4.5:1 floor.
     --text-primary (#302820) only reaches 3.81:1 here, still short, so a
     darker hue-matched brown is used instead: 4.74:1. */
  --accent-on: #1a160f;
  --accent-soft: rgba(181, 114, 90, 0.12);
  --accent-glow: rgba(181, 114, 90, 0.2);
  --accent-text: #9a5a42;

  --stage-forecast: #6b6e7a;
  --stage-intake: #7a6b80;
  --stage-preproduction: #807a6b;
  --stage-production: #806b6b;
  --stage-post: #6b8078;
  --stage-review: #7e7d60;
  --stage-completion: #6b806b;

  --severity-critical: #c0392b;
  --severity-warning: #c07b2b;
  --severity-watch: #b5a020;
  --severity-insight: #2b6c9e;

  --text-primary: #302820;
  --text-secondary: #6e6358;
  /* #a09688 measured 2.33:1 on this bg — darkened to clear the 3:1 floor
     while staying well below --text-secondary's contrast. */
  --text-muted: #827768;
  --text-accent: var(--accent-text);

  --shadow-sm: 0 1px 3px rgba(80, 50, 20, 0.07);
  --shadow-md: 0 4px 12px rgba(80, 50, 20, 0.09);
  --shadow-lg: 0 8px 32px rgba(80, 50, 20, 0.11);
  --shadow-accent: 0 0 20px rgba(181, 114, 90, 0.15);

  --scrollbar-thumb: rgba(80, 50, 20, 0.12);
  --scrollbar-hover: rgba(80, 50, 20, 0.22);

  --text-inverse: #ffffff;
  /* Semantic colors — the base :root values are tuned for dark backgrounds
     and fall well under 4.5:1 here; darkened, hue-preserved overrides. */
  --success: #337435;
  --warning: #8b5e10;
  --error: #cb1b1b;
  --sunday-accent: #945a0c;
  --sunday-accent-text: #925b09;
  /* #5a9a5a measured 2.62:1 on this bg — darkened to clear 4.5:1. */
  --capacity-available: #437243;
  --capacity-busy: #2a6f96;
  --event-color-1: #3b82f6;
  --event-color-2: #7c3aed;
  --event-color-3: #8b5fc7;
  --canvas-bg: #f5f0eb;
  --overlay-bg: rgba(0, 0, 0, 0.4);
  --overlay-bg-light: rgba(0, 0, 0, 0.2);

  /* Chrome tokens (app-header / bottom-nav) — no dedicated chrome override
     block for this theme, so mirror the unscoped base rules. */
  --chrome-bg: var(--header-bg);
  --chrome-fg: var(--text-primary);
  --chrome-fg-muted: var(--text-muted);
  --chrome-border: var(--glass-border);
  --chrome-accent: var(--accent);

  color-scheme: light;
}

/* ── System preference (when data-theme="system" or not set) ── */
/* MUST mirror [data-theme="light"] above exactly — update both together. */
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg-primary: #ece5dc;
    --bg-secondary: #e2d9cf;
    --bg-tertiary: #e7ded5;

    --glass-bg: rgba(255, 252, 248, 0.55);
    --glass-bg-hover: rgba(255, 252, 248, 0.72);
    --glass-bg-active: rgba(255, 252, 248, 0.88);
    --glass-border: rgba(120, 90, 60, 0.1);
    --glass-border-hover: rgba(120, 90, 60, 0.18);
    --glass-blur: 20px;

    --glass-specular: rgba(255, 255, 255, 0.45);
    --glass-specular-edge: rgba(255, 255, 255, 0.0);
    --glass-caustic: rgba(255, 255, 255, 0.2);
    --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --glass-depth-shadow: 0 1px 2px rgba(80, 50, 20, 0.06), 0 4px 16px rgba(80, 50, 20, 0.08);
    --glass-glare-color: rgba(255, 255, 255, 0.18);

    --header-bg: rgba(236, 229, 220, 0.92);
    --nav-bg: rgba(236, 229, 220, 0.95);

    --accent-rgb: 181, 114, 90;
    /* MUST mirror [data-theme="light"] above: #ffffff measured 3.80:1 on
       --accent (#b5725a); darker hue-matched brown reaches 4.74:1. */
    --accent-on: #1a160f;
    --accent-soft: rgba(181, 114, 90, 0.12);
    --accent-glow: rgba(181, 114, 90, 0.2);
    --accent-text: #9a5a42;

    --stage-forecast: #6b6e7a;
    --stage-intake: #7a6b80;
    --stage-preproduction: #807a6b;
    --stage-production: #806b6b;
    --stage-post: #6b8078;
    --stage-review: #7e7d60;
    --stage-completion: #6b806b;

    --severity-critical: #c0392b;
    --severity-warning: #c07b2b;
    --severity-watch: #b5a020;
    --severity-insight: #2b6c9e;

    --text-primary: #302820;
    --text-secondary: #6e6358;
    --text-muted: #827768;
    --text-accent: var(--accent-text);

    --shadow-sm: 0 1px 3px rgba(80, 50, 20, 0.07);
    --shadow-md: 0 4px 12px rgba(80, 50, 20, 0.09);
    --shadow-lg: 0 8px 32px rgba(80, 50, 20, 0.11);
    --shadow-accent: 0 0 20px rgba(181, 114, 90, 0.15);

    --scrollbar-thumb: rgba(80, 50, 20, 0.12);
    --scrollbar-hover: rgba(80, 50, 20, 0.22);

    --text-inverse: #ffffff;
    --success: #337435;
    --warning: #8b5e10;
    --error: #cb1b1b;
    --sunday-accent: #945a0c;
    --sunday-accent-text: #925b09;
    --capacity-available: #437243;
    --capacity-busy: #2a6f96;
    --event-color-1: #3b82f6;
    --event-color-2: #7c3aed;
    --event-color-3: #8b5fc7;
    --canvas-bg: #f5f0eb;
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --overlay-bg-light: rgba(0, 0, 0, 0.2);

    --chrome-bg: var(--header-bg);
    --chrome-fg: var(--text-primary);
    --chrome-fg-muted: var(--text-muted);
    --chrome-border: var(--glass-border);
    --chrome-accent: var(--accent);

    color-scheme: light;
  }
}

/* ── Theme: Clean ─────────────────────────────────────────────── */
/* Flat, no glass/blur, tighter radius, neutral accent. The id stays
   'clean-dark' (saved in studio_theme and on the account); since Sep 25
   2026 (Zach: "a light option for the clean dark theme") it has a light
   half and follows the app bar's scheme like Cadence does. Cadence and
   Social wear the same palette — html[data-palette='clean'] in
   frontend-shared/theme.css; keep the two in step. */
[data-theme="clean-dark"] {
  color-scheme: light dark;

  --bg-primary: light-dark(#f6f6f6, #1a1a1a);
  --bg-secondary: light-dark(#ffffff, #222222);
  --bg-tertiary: light-dark(#efefef, #1e1e1e);

  --glass-bg: light-dark(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.06));
  --glass-bg-hover: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.10));
  --glass-bg-active: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.14));
  --glass-border: light-dark(rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.10));
  --glass-border-hover: light-dark(rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.18));
  --glass-blur: 0px;

  --glass-specular: transparent;
  --glass-specular-edge: transparent;
  --glass-caustic: transparent;
  --glass-inner-shadow: none;
  --glass-depth-shadow: none;
  --glass-glare-color: transparent;

  --header-bg: light-dark(rgba(255, 255, 255, 0.96), rgba(26, 26, 26, 0.95));
  --nav-bg: light-dark(rgba(255, 255, 255, 0.98), rgba(26, 26, 26, 0.98));

  --accent: light-dark(#3d5f80, #7c9cba);
  /* Dark: #ffffff measured 2.87:1 on #7c9cba — near-black measures 6.07:1.
     Light: white on #3d5f80 measures 6.6:1. */
  --accent-on: light-dark(#ffffff, #1a1a1a);
  --accent-soft: light-dark(rgba(61, 95, 128, 0.10), rgba(124, 156, 186, 0.12));
  --accent-glow: light-dark(rgba(61, 95, 128, 0.18), rgba(124, 156, 186, 0.20));
  --accent-hover: light-dark(#46698c, #8eacc8);
  --accent-text: light-dark(#3d5f80, #9cb8d4);

  --stage-forecast: light-dark(#666b7a, #8a8fa0);
  --stage-intake: light-dark(#765f85, #9a8aa5);
  --stage-preproduction: light-dark(#7f7050, #a59a82);
  --stage-production: light-dark(#8f5555, #a58282);
  --stage-post: light-dark(#4f7f70, #82a59a);
  --stage-review: light-dark(#76763f, #a5a582);
  --stage-completion: light-dark(#4f7f4f, #82a582);

  --severity-critical: light-dark(#b64444, #d45d5d);
  --severity-warning: light-dark(#9a6b1c, #d4a04d);
  --severity-watch: light-dark(#86761a, #d4c44d);
  --severity-insight: light-dark(#3f6f97, #5d8fb5);

  --text-primary: light-dark(#1d1d1d, #d8d8d8);
  --text-secondary: light-dark(#5e5e5e, #888888);
  /* Dark: #555555 measured 2.33:1 on #1a1a1a — lightened to clear 3:1. */
  --text-muted: light-dark(#6a6a6a, #6c6c6c);
  --text-accent: var(--accent-text);

  /* The Studio's light palette values (see [data-theme="light"]). */
  --success: light-dark(#337435, #4caf50);
  --warning: light-dark(#8b5e10, #e8a838);
  --error: light-dark(#cb1b1b, #e53e3e);
  --sunday-accent: light-dark(#945a0c, #f0a94b);
  --sunday-accent-text: light-dark(#925b09, #f7c479);
  --capacity-available: light-dark(#437243, #78b478);
  --capacity-busy: light-dark(#2a6f96, #60BBE9);
  --event-color-1: light-dark(#3b82f6, #60a5fa);
  --event-color-2: light-dark(#7c3aed, #a78bfa);
  --event-color-3: light-dark(#8b5fc7, #ab8fd2);
  --overlay-bg: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5));
  --overlay-bg-light: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));

  --shadow-sm: light-dark(0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2));
  --shadow-md: light-dark(0 2px 8px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.25));
  --shadow-lg: light-dark(0 4px 16px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.3));
  --shadow-accent: none;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --blur-xs: 0px;
  --blur-sm: 0px;
  --blur-md: 0px;
  --blur-lg: 0px;
  --blur-xl: 0px;

  --canvas-bg: light-dark(#f6f6f6, #1a1a1a);

  --scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.10));
  --scrollbar-hover: light-dark(rgba(0, 0, 0, 0.24), rgba(255, 255, 255, 0.20));

  --chrome-bg: var(--header-bg);
  --chrome-fg: var(--text-primary);
  --chrome-fg-muted: var(--text-muted);
  --chrome-border: var(--glass-border);
  --chrome-accent: var(--accent);
}
/* The bar pins the scheme on <html>; 'system' (or nothing yet) follows
   the OS. A clean-dark user with no scheme saved is seeded 'dark' by the
   app bar (LIGHT_PALETTES), so nobody's Clean turns light by itself. */
html[data-theme="clean-dark"][data-scheme="light"] { color-scheme: light; }
html[data-theme="clean-dark"][data-scheme="dark"]  { color-scheme: dark; }
html[data-theme="clean-dark"] { --accent-rgb: 61, 95, 128; }
html[data-theme="clean-dark"][data-scheme="dark"] { --accent-rgb: 124, 156, 186; }
@media (prefers-color-scheme: dark) {
  html[data-theme="clean-dark"]:not([data-scheme="light"]) { --accent-rgb: 124, 156, 186; }
}

/* ── Theme: Asana-Inspired ───────────────────────────────────── */
/* Clean white, warm neutrals, subtle shadows, Asana-style feel   */
[data-theme="asana"] {
  --font-mono: -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --bg-primary: #f5f4f3;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f9f8f8;

  --glass-bg: #f1f1f0;
  --glass-bg-hover: #eae9e7;
  --glass-bg-active: #e2e1de;
  --glass-border: #d9d7d4;
  --glass-border-hover: #c8c5c0;
  --glass-blur: 0px;

  --glass-specular: transparent;
  --glass-specular-edge: transparent;
  --glass-caustic: transparent;
  --glass-inner-shadow: none;
  --glass-depth-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  --glass-glare-color: transparent;

  --header-bg: #2e2e30;
  --nav-bg: #2e2e30;

  --accent: #e8655a;
  --accent-rgb: 232, 101, 90;
  /* #fff on this coral measured 3.26:1 — below the 4.5 floor. The chrome
     charcoal (#1e1e1e) measures 5.11:1 and stays on-palette. */
  --accent-on: #1e1e1e;
  --accent-soft: rgba(232, 101, 90, 0.10);
  --accent-glow: rgba(232, 101, 90, 0.15);
  --accent-hover: #d4584e;
  --accent-text: #d4584e;

  --stage-forecast: #6d6e6f;
  --stage-intake: #8d84e8;
  --stage-preproduction: #ec8d71;
  --stage-production: #f06a6a;
  --stage-post: #4ecbc4;
  --stage-review: #f1bd6c;
  --stage-completion: #5da283;

  --severity-critical: #d4584e;
  --severity-warning: #e8a838;
  --severity-watch: #c9b02b;
  --severity-insight: #4573d2;

  --text-primary: #1e1f21;
  --text-secondary: #6d6e6f;
  /* #9ca0a5 measured 2.39:1 on this bg — darkened to clear the 3:1 floor. */
  --text-muted: #7d8289;
  --text-accent: var(--accent-text);
  --text-inverse: #ffffff;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.12);
  --shadow-accent: 0 0 0 2px var(--accent-soft);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --blur-xs: 0px;
  --blur-sm: 0px;
  --blur-md: 0px;
  --blur-lg: 0px;
  --blur-xl: 0px;

  /* Semantic colors — the base :root values are tuned for dark backgrounds
     and fall well under 4.5:1 here; darkened, hue-preserved overrides. */
  --success: #337435;
  --warning: #8b5e10;
  --error: #cb1b1b;
  --sunday-accent: #945a0c;
  --sunday-accent-text: #925b09;
  /* #5da283 measured well under 4.5:1 on this bg — darkened, same hue. */
  --capacity-available: #467a63;
  --capacity-busy: #2a6f96;
  --event-color-1: #4573d2;
  --event-color-2: #8d84e8;
  --event-color-3: #b36bd4;
  --canvas-bg: #f9f8f8;
  --overlay-bg: rgba(0, 0, 0, 0.35);
  --overlay-bg-light: rgba(0, 0, 0, 0.15);

  --scrollbar-thumb: rgba(0, 0, 0, 0.10);
  --scrollbar-hover: rgba(0, 0, 0, 0.20);

  /* Chrome tokens — mirror the dark [data-theme="asana"] chrome override
     block in layout.css (.app-header/.bottom-nav render dark #2e2e30
     regardless of this theme's light page background). */
  --chrome-bg: #2e2e30;
  --chrome-fg: rgba(255, 255, 255, 0.9);
  --chrome-fg-muted: rgba(255, 255, 255, 0.55);
  --chrome-border: rgba(255, 255, 255, 0.08);
  --chrome-accent: var(--accent);

  color-scheme: light;
}

/* ── Theme: Perimeter Church Brand ────────────────────────────── */
/* White/navy, light blue accent, clean and professional         */
[data-theme="perimeter"] {
  --font-heading: 'Freight DispPro', 'Georgia', serif;
  --font-body: 'Sweet Sans Pro', 'DM Sans', -apple-system, system-ui, sans-serif;
  --font-ui: 'Sweet Sans Pro', 'DM Sans', -apple-system, system-ui, sans-serif;
  --font-mono: 'Sweet Sans Pro', 'DM Sans', -apple-system, system-ui, sans-serif;

  --bg-primary: #f7f8fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f2f5;

  --glass-bg: #f0f2f5;
  --glass-bg-hover: #e6e9ed;
  --glass-bg-active: #dde0e5;
  --glass-border: #d4d8de;
  --glass-border-hover: #bfc4cc;
  --glass-blur: 0px;

  --glass-specular: transparent;
  --glass-specular-edge: transparent;
  --glass-caustic: transparent;
  --glass-inner-shadow: none;
  --glass-depth-shadow: 0 1px 3px rgba(9, 36, 63, 0.06);
  --glass-glare-color: transparent;

  --header-bg: #09243f;
  --nav-bg: #09243f;

  --accent: #60bbe9;
  --accent-rgb: 96, 187, 233;
  /* Light-blue accent — navy chrome color reads clearly on it, unlike white. */
  --accent-on: #09243f;
  --accent-soft: rgba(96, 187, 233, 0.12);
  --accent-glow: rgba(96, 187, 233, 0.20);
  --accent-hover: #4aaad8;
  --accent-text: #3a8dbf;

  --stage-forecast: #8a8fa0;
  --stage-intake: #60bbe9;
  --stage-preproduction: #e8a838;
  --stage-production: #e06050;
  --stage-post: #4ecbc4;
  --stage-review: #d4a04d;
  --stage-completion: #5da283;

  --severity-critical: #d4584e;
  --severity-warning: #e8a838;
  --severity-watch: #c9b02b;
  --severity-insight: #60bbe9;

  --text-primary: #09243f;
  --text-secondary: #4a5568;
  /* #8a95a5 measured 2.85:1 on this bg — darkened to clear the 3:1 floor
     while staying well below --text-secondary's contrast. */
  --text-muted: #6b7688;
  --text-accent: var(--accent-text);
  --text-inverse: #ffffff;

  --shadow-sm: 0 1px 3px rgba(9, 36, 63, 0.06);
  --shadow-md: 0 2px 8px rgba(9, 36, 63, 0.08);
  --shadow-lg: 0 4px 24px rgba(9, 36, 63, 0.12);
  --shadow-accent: 0 0 0 2px var(--accent-soft);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --blur-xs: 0px;
  --blur-sm: 0px;
  --blur-md: 0px;
  --blur-lg: 0px;
  --blur-xl: 0px;

  /* Semantic colors — the base :root values are tuned for dark backgrounds
     and fall well under 4.5:1 here; darkened, hue-preserved overrides. */
  --success: #337435;
  --warning: #8b5e10;
  --error: #cb1b1b;
  --sunday-accent: #945a0c;
  --sunday-accent-text: #925b09;
  /* #5da283 measured under 4.5:1 on this bg — darkened, same hue. */
  --capacity-available: #477d65;
  --capacity-busy: #2a6f96;
  --event-color-1: #60bbe9;
  --event-color-2: #8d84e8;
  --event-color-3: #b36bd4;
  --canvas-bg: #f7f8fa;
  --overlay-bg: rgba(9, 36, 63, 0.4);
  --overlay-bg-light: rgba(9, 36, 63, 0.2);

  --scrollbar-thumb: rgba(9, 36, 63, 0.10);
  --scrollbar-hover: rgba(9, 36, 63, 0.20);

  /* Chrome tokens — the navy/light-blue chrome this theme currently
     hardcodes in layout.css [data-theme="perimeter"] rules for
     .app-header/.bottom-nav and friends. Rules there now consume these. */
  --chrome-bg: #09243f;
  --chrome-fg: #ffffff;
  --chrome-fg-muted: rgba(255, 255, 255, 0.55);
  --chrome-border: rgba(255, 255, 255, 0.08);
  --chrome-accent: #60bbe9;

  color-scheme: light;
}

/* ── Cadence Theme ────────────────────────────────────────────── */
/* The Studio in the same clothes as the Desk and Social (Sep 17 2026 —
   Zach: "a theme that matches Cadence and Social for Studio"). Every
   colour is a light-dark() pair copied from frontend-shared/theme.css,
   the ONE token source the two React apps bundle, so the three surfaces
   read as one system. It is the first Studio palette that is BOTH light
   and dark: color-scheme follows the app bar's studio_scheme
   (html[data-scheme]) exactly as theme.css follows it in the React apps —
   the bar's sun/moon does here what it does there. Faces are the kit's:
   Literata for headings, the system UI stack for body and UI (font
   pairing 'h', derived when this palette is chosen without a saved
   pairing). Keep this block in step with theme.css. */
[data-theme="cadence"] {
  color-scheme: light dark;
  /* The kit has no mono voice: its caps labels are the UI face, tracked.
     Section titles and tab names take that face here too (as Asana does). */
  --font-mono: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Literata', 'Iowan Old Style', Palatino, 'Palatino Linotype', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --bg-primary: light-dark(#fbfcfd, #0f1822);        /* --paper */
  --bg-secondary: light-dark(#ffffff, #15212e);      /* --card */
  --bg-tertiary: light-dark(#f4f7fa, #182636);       /* --card-tint */

  --glass-bg: light-dark(#f4f7fa, #182636);
  --glass-bg-hover: light-dark(#ecf1f6, #1c2b3d);    /* --line-soft */
  --glass-bg-active: light-dark(#dfe6ee, #24354a);   /* --line */
  --glass-border: light-dark(#dfe6ee, #24354a);
  --glass-border-hover: light-dark(#c9d3de, #2f4560);
  --glass-blur: 0px;

  --glass-specular: transparent;
  --glass-specular-edge: transparent;
  --glass-caustic: transparent;
  --glass-inner-shadow: none;
  --glass-depth-shadow: light-dark(0 1px 3px rgba(22, 35, 47, 0.06), 0 1px 3px rgba(0, 0, 0, 0.35));
  --glass-glare-color: transparent;

  /* The Studio's own header and desktop rail are paper surfaces (Social's
     desktop look: a light rail under an ink app bar); the phone tab bar
     takes the chrome tokens below and frames the page in ink with the bar. */
  --header-bg: light-dark(#ffffff, #15212e);
  --nav-bg: light-dark(#ffffff, #15212e);

  --accent: light-dark(#1c4e88, #6ea8e8);             /* --navy */
  --accent-on: light-dark(#ffffff, #0f1822);
  --accent-soft: light-dark(rgba(28, 78, 136, 0.12), rgba(110, 168, 232, 0.16));
  --accent-glow: light-dark(rgba(28, 78, 136, 0.20), rgba(110, 168, 232, 0.24));
  --accent-hover: light-dark(#2563a8, #7fb2ec);       /* --navy-bright */
  --accent-text: light-dark(#1c4e88, #7fb2ec);

  --stage-forecast: light-dark(#64748a, #7b8da0);     /* --faint */
  --stage-intake: light-dark(#1c4e88, #6ea8e8);       /* navy */
  --stage-preproduction: light-dark(#b98a2f, #d4a94f);/* gold */
  --stage-production: light-dark(#a33d2e, #e08574);   /* danger */
  --stage-post: light-dark(#2a7d8c, #6cc3d2);
  --stage-review: light-dark(#8f6a20, #e0bc6a);       /* gold-deep */
  --stage-completion: light-dark(#1e7d3c, #7fc796);   /* ok */

  --severity-critical: light-dark(#a33d2e, #e08574);
  --severity-warning: light-dark(#b98a2f, #d4a94f);
  --severity-watch: light-dark(#8f6a20, #e0bc6a);
  --severity-insight: light-dark(#2563a8, #7fb2ec);

  --text-primary: light-dark(#16232f, #e4ecf4);       /* --ink */
  --text-secondary: light-dark(#5c6b7a, #8fa0b0);     /* --muted */
  --text-muted: light-dark(#64748a, #7b8da0);         /* --faint */
  --text-accent: var(--accent-text);
  --text-inverse: #ffffff;

  --shadow-sm: light-dark(0 1px 3px rgba(22, 35, 47, 0.06), 0 1px 3px rgba(0, 0, 0, 0.35));
  --shadow-md: light-dark(0 2px 8px rgba(22, 35, 47, 0.08), 0 4px 12px rgba(0, 0, 0, 0.45));
  --shadow-lg: light-dark(0 4px 24px rgba(22, 35, 47, 0.12), 0 8px 32px rgba(0, 0, 0, 0.55));
  --shadow-accent: 0 0 0 3px var(--accent-soft);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --blur-xs: 0px;
  --blur-sm: 0px;
  --blur-md: 0px;
  --blur-lg: 0px;
  --blur-xl: 0px;

  --success: light-dark(#1e7d3c, #7fc796);            /* --ok */
  --warning: light-dark(#8f6a20, #e0bc6a);            /* --gold-deep */
  --error: light-dark(#a33d2e, #e08574);              /* --danger */
  --sunday-accent: light-dark(#b98a2f, #d4a94f);      /* --gold */
  --sunday-accent-text: light-dark(#8f6a20, #e0bc6a); /* --gold-deep */
  --capacity-available: light-dark(#1e7d3c, #7fc796);
  --capacity-busy: light-dark(#2a6f96, #60BBE9);
  --event-color-1: light-dark(#1c4e88, #6ea8e8);
  --event-color-2: light-dark(#b98a2f, #d4a94f);
  --event-color-3: light-dark(#2a7d8c, #6cc3d2);
  --canvas-bg: light-dark(#fbfcfd, #0f1822);
  --overlay-bg: light-dark(rgba(16, 30, 46, 0.32), rgba(0, 0, 0, 0.5));      /* --scrim */
  --overlay-bg-light: light-dark(rgba(16, 30, 46, 0.16), rgba(0, 0, 0, 0.3));

  --scrollbar-thumb: light-dark(rgba(22, 35, 47, 0.12), rgba(228, 236, 244, 0.10));
  --scrollbar-hover: light-dark(rgba(22, 35, 47, 0.22), rgba(228, 236, 244, 0.18));

  /* Chrome — the kit's app bar is ink in both schemes (--chrome); the
     phone tab bar follows it. Gold is the chrome accent, as on the Desk. */
  --chrome-bg: light-dark(#16232f, #0a1119);
  --chrome-fg: #e4ecf4;
  --chrome-fg-muted: rgba(228, 236, 244, 0.6);
  --chrome-border: rgba(228, 236, 244, 0.1);
  --chrome-accent: #d4a94f;
}
/* The bar pins the scheme on <html>; 'system' (or nothing yet) follows the OS. */
html[data-theme="cadence"][data-scheme="light"] { color-scheme: light; }
html[data-theme="cadence"][data-scheme="dark"]  { color-scheme: dark; }
/* --accent-rgb is a bare triple used inside rgba(), which light-dark()
   cannot express — pinned per scheme, OS-followed when unpinned. */
html[data-theme="cadence"] { --accent-rgb: 28, 78, 136; }
html[data-theme="cadence"][data-scheme="dark"] { --accent-rgb: 110, 168, 232; }
@media (prefers-color-scheme: dark) {
  html[data-theme="cadence"]:not([data-scheme="light"]) { --accent-rgb: 110, 168, 232; }
}

/* ── Base ─────────────────────────────────────────────────────── */
html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  /* Chrome color, not page color: this is what shows behind the translucent iOS
     status bar (above the app header) and in overscroll — it must match the
     header/nav chrome or dark-chrome themes get a light seam up top. The page
     body itself is always covered by .page (bg-primary). */
  background: var(--chrome-bg, var(--bg-primary));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Human interaction elements stay sans-serif */
button, .btn, .chip, .input-label,
select, .settings-group-title {
  font-family: var(--font-ui);
}

/* System voice elements use mono — the "MainFrame" identity */
.badge, .nav-item, .section-title, .section-link,
.stat-value, .stat-label, .page-header-title,
.page-header-brand {
  font-family: var(--font-mono);
}

/* ── Typography ───────────────────────────────────────────────── */
.text-xs   { font-size: 0.75rem; line-height: 1.4; }
.text-sm   { font-size: 0.8125rem; line-height: 1.45; }
.text-base { font-size: 1rem; line-height: 1.5; }
.text-lg   { font-size: 1.125rem; line-height: 1.4; }
.text-xl   { font-size: 1.25rem; line-height: 1.35; }
.text-2xl  { font-size: 1.5rem; line-height: 1.3; }
.text-3xl  { font-size: 1.875rem; line-height: 1.25; }

/* Headings use the heading font */
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
}

.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent-text); }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only     { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── Glass Card (Liquid Glass) ────────────────────────────────── */
.glass-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-inner-shadow), var(--glass-depth-shadow);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

/* Specular highlight — curved light reflection on top edge */
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    var(--glass-specular) 0%,
    var(--glass-specular-edge) 50%
  );
  pointer-events: none;
  z-index: 1;
}

/* Interactive glare — follows mouse cursor on desktop */
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 180px at var(--glare-x, 50%) var(--glare-y, 50%),
    var(--glass-glare-color) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.glass-card.glare-active::after {
  opacity: 1;
}

.glass-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.glass-card--static {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-inner-shadow), var(--glass-depth-shadow);
}

/* Specular on static cards too */
.glass-card--static::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    var(--glass-specular) 0%,
    var(--glass-specular-edge) 50%
  );
  pointer-events: none;
  z-index: 1;
}

.glass-card--accent {
  border-color: var(--accent-glow);
  background: linear-gradient(135deg, var(--glass-bg) 0%, var(--accent-soft) 100%);
}

/* ── Glass Input ──────────────────────────────────────────────── */
.glass-input {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-md) var(--sp-lg);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;
}

.glass-input::placeholder {
  color: var(--text-muted);
}

.glass-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

/* ── Utility: Flex ────────────────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-1      { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-xs { gap: var(--sp-xs); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }
.gap-xl { gap: var(--sp-xl); }
.gap-2xl { gap: var(--sp-2xl); }

/* ── Utility: Grid ────────────────────────────────────────────── */
.grid       { display: grid; }
.grid-2     { grid-template-columns: repeat(2, 1fr); }
.grid-3     { grid-template-columns: repeat(3, 1fr); }
.grid-4     { grid-template-columns: repeat(4, 1fr); }

/* ── Utility: Spacing ─────────────────────────────────────────── */
.p-sm  { padding: var(--sp-sm); }
.p-md  { padding: var(--sp-md); }
.p-lg  { padding: var(--sp-lg); }
.p-xl  { padding: var(--sp-xl); }
.px-lg { padding-left: var(--sp-lg); padding-right: var(--sp-lg); }
.px-xl { padding-left: var(--sp-xl); padding-right: var(--sp-xl); }
.py-sm { padding-top: var(--sp-sm); padding-bottom: var(--sp-sm); }
.py-md { padding-top: var(--sp-md); padding-bottom: var(--sp-md); }
.py-lg { padding-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }

/* ── Utility: Misc ────────────────────────────────────────────── */
.w-full   { width: 100%; }
.h-full   { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.hidden   { display: none; }
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.rounded-full { border-radius: var(--radius-full); }

/* ── Scrollbar ────────────────────────────────────────────────── */
/* 8px gives a real grab target on trackpads/touch-mice; thumb color comes
   from --scrollbar-thumb, which every theme defines with enough alpha to
   stay visible against its own --bg-primary. */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar:horizontal { height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* ── Focus-visible (keyboard navigation) ────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Desktop hover states ───────────────────────────────────── */
@media (hover: hover) {
  .list-item:hover,
  .dropdown-item:hover,
  .health-stage:hover,
  .kanban-card:hover,
  .meeting-grid-card:hover,
  .file-list-item:hover {
    background: var(--glass-bg-hover);
  }
}

/* ── Theme transition ────────────────────────────────────────── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}