/* BETOOTH central dark design system. Brand colors are immutable; surfaces are derived. */
:root{
 color-scheme:dark;
 --betooth-deep:#17313B; --betooth-muted:#4C7E8A; --betooth-light:#8FAEB8;
 --betooth-paper:#F6F4EF; --betooth-orange:#F59D4D; --neutral-white:#FFFFFF;
 /* Five tonal levels, never a competing route theme. Black is only a shade mixer. */
 --bg-page:color-mix(in srgb,var(--betooth-deep) 28%,black);
 --bg-sidebar:color-mix(in srgb,var(--betooth-deep) 36%,black);
 --bg-panel:color-mix(in srgb,var(--betooth-deep) 46%,black);
 --bg-card:color-mix(in srgb,var(--betooth-deep) 60%,black);
 --bg-hover:color-mix(in srgb,var(--betooth-muted) 24%,var(--betooth-deep));
 --text-primary:var(--betooth-paper);
 --text-secondary:color-mix(in srgb,var(--betooth-light) 85%,var(--betooth-paper));
 --text-muted:var(--betooth-light);
 --accent-primary:hsl(from var(--betooth-muted) calc(h - 8) calc(s * 2.6) calc(l * .88)); --accent-orange:var(--betooth-orange);
 --progress-fill:var(--accent-primary);
 --border-subtle:color-mix(in srgb,var(--betooth-light) 18%,transparent);
 --border-active:color-mix(in srgb,var(--accent-primary) 65%,var(--betooth-light));
 --glow-active:0 0 16px color-mix(in srgb,var(--accent-primary) 28%,transparent),inset 0 0 18px color-mix(in srgb,var(--accent-primary) 14%,transparent);
 --glow-orange:0 0 20px color-mix(in srgb,var(--betooth-orange) 8%,transparent);
 --surface:var(--bg-card); --surface-soft:var(--bg-panel); --surface-soft-strong:var(--bg-hover);
 --ink:var(--text-primary); --text-on-dark:var(--text-primary);
 --text-on-dark-muted:var(--text-secondary); --text-on-dark-subtle:var(--text-muted);
 --betooth-muted-accessible:var(--text-secondary); --betooth-deep-raised:var(--bg-card);
 --betooth-highlight-surface:var(--bg-hover); --betooth-highlight-line:var(--border-active);
 --surface-orange:color-mix(in srgb,var(--betooth-orange) 6%,var(--bg-card));
 --surface-error:var(--surface-orange);
 --line:var(--border-subtle); --line-strong:color-mix(in srgb,var(--betooth-light) 65%,transparent);
 --betooth-orange-line:color-mix(in srgb,var(--betooth-orange) 55%,transparent);
 --topbar-background:color-mix(in srgb,var(--bg-sidebar) 96%,transparent);
 --nav-hover:var(--bg-hover); --overlay:color-mix(in srgb,var(--bg-page) 80%,transparent);
 --beto-deep:var(--betooth-deep); --beto-mint:var(--betooth-orange); --beto-light:var(--betooth-light);
 --beto-paper:var(--bg-panel); --beto-orange:var(--betooth-orange);
 --beto-highlight-surface:var(--bg-hover); --beto-panel:var(--bg-panel);
 --beto-panel-line:var(--border-subtle); --beto-mint-line:var(--betooth-orange-line);
 --shadow-soft:0 6px 20px color-mix(in srgb,var(--bg-page) 36%,transparent);
 --shadow-sm:var(--shadow-soft); --shadow-md:0 10px 28px color-mix(in srgb,var(--bg-page) 48%,transparent);
 --shadow-lg:var(--shadow-md); --shadow:var(--shadow-sm); --shadow-strong:var(--shadow-md); --focus:var(--betooth-orange);
 --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
 --space-6:24px; --space-7:32px; --space-8:32px; --space-9:48px; --space-10:48px;
 --radius-control:8px; --radius-button:10px; --radius-card:18px;
 --radius-sm:var(--radius-control); --radius-md:14px; --radius-lg:var(--radius-card);
 --radius-xl:var(--radius-card); --radius-2xl:var(--radius-card); --radius-pill:999px;
 --font-display:clamp(2.5rem,4.6vw,3.5rem); --font-h1:clamp(2rem,3vw,2.75rem);
 --font-h2:clamp(1.5rem,2vw,2rem); --font-h3:1.125rem;
 --font-body:1rem; --font-small:.8125rem; --font-label:.6875rem;
 --line-body:1.6; --line-heading:1.16;
 --control-height:44px; --control-height-touch:44px; --card-padding:24px;
 --content-max:1200px; --focus-width:3px; --focus-offset:3px; --disabled-opacity:.55;
 --motion-fast:160ms; --motion-standard:180ms; --motion-slow:220ms;
 --ease-standard:cubic-bezier(.2,.7,.2,1); --ease-emphasized:var(--ease-standard);
 --transition-fast:var(--motion-fast) var(--ease-standard);
 --transition-standard:var(--motion-standard) var(--ease-standard);
 --transition-slow:var(--motion-slow) var(--ease-standard);

 --success:var(--betooth-light); --success-line:var(--betooth-muted); --success-surface:var(--bg-hover);
 --warning:var(--text-primary); --warning-line:var(--betooth-orange); --error:var(--text-primary);
 --error-line:var(--betooth-orange); --danger:var(--text-primary);
 --brand-deep:var(--betooth-deep); --brand-muted:var(--betooth-muted);
 --brand-muted-accessible:var(--text-secondary); --brand-light:var(--betooth-light);
 --brand-paper:var(--betooth-paper); --brand-orange:var(--betooth-orange);
 --brand-deep-raised:var(--bg-panel); --deep:var(--betooth-deep); --muted:var(--text-secondary);
 --light:var(--betooth-light); --paper:var(--bg-page); --accent:var(--betooth-orange); --white:var(--text-primary);
 --layout-unit:clamp(.85px,.0625vw,1.2px);
 --sidebar-width:calc(274 * var(--layout-unit)); --topbar-height:calc(100 * var(--layout-unit));
 --display-family:Georgia,'Times New Roman',serif;
 --button-background:color-mix(in srgb,var(--betooth-muted) 55%,var(--betooth-deep));
 --button-fill:linear-gradient(110deg,color-mix(in srgb,var(--accent-primary) 68%,var(--bg-panel)),color-mix(in srgb,var(--accent-primary) 16%,var(--bg-panel)));
 --button-inset:inset 0 1px 0 color-mix(in srgb,var(--betooth-light) 32%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--bg-page) 55%,transparent);
 --button-fill-hover:linear-gradient(110deg,color-mix(in srgb,var(--accent-primary) 78%,var(--bg-panel)),color-mix(in srgb,var(--accent-primary) 28%,var(--bg-panel)));
 --button-glow-hover:0 4px 16px color-mix(in srgb,var(--accent-primary) 25%,transparent),inset 0 1px 0 var(--border-active);
 --surface-inset:inset 0 2px 6px color-mix(in srgb,var(--bg-page) 50%,transparent);
 --shell-divider:color-mix(in srgb,var(--betooth-light) 26%,transparent);
 --button-foreground:var(--text-primary); --button-hover:color-mix(in srgb,var(--betooth-muted) 75%,var(--betooth-deep));
 --button-border:var(--line-strong);
}