/**
* This file would be included at the root of our app
*/

/* This will contain the global colors and values of our app */
:root {
	color-scheme: light;
	/* Theme colors — legacy --batterii-* hued tokens are DEPRECATED and aliased to their modern targets; kept so in-flight branches keep resolving. */
	--batterii-green: var(--green-vurvey-500);
	--batterii-navy: var(--gray-modern-800);
	--batterii-navy-medium: var(--gray-modern-700);
	/* DEPRECATED: retiring in favor of --purple-brand-500. Kept as an alias so in-flight branches that still reference var(--batterii-purple) keep resolving;. */
	--batterii-purple: var(--purple-brand-500);
	--batterii-red: var(--red-500);
	--batterii-coral: var(--red-400);
	--batterii-magenta: var(--purple-brand-500);
	--batterii-yellow: var(--volt-400);
	--batterii-yellow-tip: var(--neutral-200);
	--batterii-brand-yellow: var(--volt-500);
	--batterii-hot-pink: var(--red-500);
	--batterii-light-teal: var(--gray-modern-100);
	--batterii-teal: var(--gray-modern-400);

	--batterii-green-faded: rgba(34, 197, 129, 0.15);
	--batterii-purple-faded: color-mix(in srgb, var(--purple-brand-500) 15%, transparent);
	--batterii-red-faded: rgba(244, 49, 49, 0.15);
	--batterii-white-faded: rgba(255, 255, 255, 0.2);
	/* Colors from the newest wireframes (maybe won't be final?) */
	--batterii-blue: var(--blue-dark-500);
	--batterii-green-two: var(--green-vurvey-500);

	/* diffrent opacity levels of black */
	--batterii-black-1: rgba(0, 0, 0, 0.1);
	--batterii-black-2: rgba(0, 0, 0, 0.2);
	--batterii-black-5: rgba(0, 0, 0, 0.5);
	--batterii-black-8: rgba(0, 0, 0, 0.8);

	--element-shadow: 1px 3px 4px 1px var(--neutral-200);
	/* grayscale — DEPRECATED aliases: retiring into --neutral-*, kept so in-flight branches that still reference these keep resolving. */
	--batterii-white: var(--neutral-0);
	--batterii-black: var(--neutral-950);
	--batterii-black-lighter: var(--neutral-925);
	--batterii-grey-extradark: var(--neutral-700);
	--batterii-grey-dark: var(--neutral-500);
	--batterii-grey-medium: var(--neutral-500);
	--batterii-grey-light: var(--neutral-400);
	--batterii-grey: var(--neutral-300);
	--batterii-grey-extralight: var(--neutral-200);
	--batterii-grey-white: var(--neutral-100);
	--batterii-white-smoke: var(--neutral-100);
	--auth0-dark-blue: #1b1b22;

	/* Static height or width values of global elements*/
	--top-nav-height: 60px;
	--left-nav-width: 66px;
	--expanded-nav-width: 240px;
	--top-banner-height: 48px;
	--left-panel-width: 280px;
	--right-panel-width: 400px;

	/* V2 CSS Variables */

	--sidebar-width: 248px;

	/* Mobile-specific variables */
	--mobile-sidebar-width: 280px;
	--mobile-header-height: 60px;
	--mobile-touch-target: 44px;
	--mobile-safe-area-top: env(safe-area-inset-top, 0px);
	/* The height of the fixed bar across the top of every mobile page, and the space the page
	   below it must leave. One value, because the two have to agree: the bar is out of flow, so
	   anything the reservation is short by is a band the bar silently takes the tap in.
	   It was short. The bar carries --space-8 of padding above and below its 44px control, and
	   this counted that padding once instead of twice, so every mobile bar rendered 8px taller
	   than the page left for it and covered the top 8px of the content. Measured at 390px: the
	   agents control panel 60px against a 52px reservation, the hub page header 58px, and the
	   hub tab strip - 44px buttons sitting exactly at the reservation - losing its whole top row
	   of hit-test samples to the bar on all ten Projects routes. */
	--mobile-overlay-chrome: calc(
		var(--mobile-safe-area-top) + var(--mobile-touch-target) + var(--space-8) + var(--space-8)
	);
	/* The other axis of the same reservation: how far in from the left every fixed mobile page
	   title has to start so it clears the shell's overlay controls. The overlay lays them out
	   left-to-right from a --space-8 gutter, so one control is that gutter plus one target, and
	   each further control costs the same again. Derived from --mobile-touch-target for the same
	   reason --mobile-overlay-chrome is: the bar and the reservation cannot be allowed to drift.
	   This was a hardcoded one-control value in mobile-native-page-header, and when a second
	   control was added to the overlay nothing widened it - the opener then painted over the
	   conversation title, 44x22px, measured at 390 and at 360. */
	--mobile-overlay-leading: calc(var(--space-8) + var(--mobile-touch-target));
	--mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
	--mobile-safe-area-left: env(safe-area-inset-left, 0px);
	--mobile-safe-area-right: env(safe-area-inset-right, 0px);

	/* How much of the bottom of the screen the on-screen keyboard covers. Declared here
	   so a consumer's calc() always has a number, and overwritten from the document root
	   by useKeyboardInset while a keyboard is open. On iOS the keyboard fires no
	   window.resize, so this is the only channel that reports it. */
	--keyboard-inset-bottom: 0px;

	/* Font family */
	--font-inter: "Inter";
	/*  Geist families + type primitives. */
	--font-geist: "Geist", sans-serif;
	--font-geist-mono: "Geist Mono", monospace;

	/* Size / line-height scale — rem = px ÷ 10 (production root = 10px) */
	--type-size-2xs: 1rem;
	--type-leading-2xs: 1.4rem; /* 10 / 14 */
	--type-size-xs: 1.2rem;
	--type-leading-xs: 1.6rem; /* 12 / 16 */
	--type-size-sm: 1.4rem;
	--type-leading-sm: 2rem; /* 14 / 20 */
	--type-size-base: 1.6rem;
	--type-leading-base: 2.4rem; /* 16 / 24 */
	--type-size-lg: 2rem;
	--type-leading-lg: 2.8rem; /* 20 / 28 */
	--type-size-xl: 2.4rem;
	--type-leading-xl: 3.2rem; /* 24 / 32 */
	--type-size-2xl: 3rem;
	--type-leading-2xl: 3.6rem; /* 30 / 36 */
	--type-size-3xl: 3.6rem;
	--type-leading-3xl: 4rem; /* 36 / 40 */
	--type-size-5xl: 4.8rem;
	--type-leading-5xl: 5.6rem; /* 48 / 56 */

	--type-weight-regular: 400;
	--type-weight-medium: 500;
	--type-weight-semibold: 600;

	/* Spacings */
	--space-2: 2px;
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-14: 14px;
	--space-16: 16px;
	--space-18: 18px;
	--space-20: 20px;
	--space-22: 22px;
	--space-24: 24px;
	--space-28: 28px;
	--space-32: 32px;
	--space-36: 36px;
	--space-40: 40px;
	--space-46: 46px;
	--space-48: 48px;
	--space-64: 64px;
	--space-74: 74px;
	--space-124: 124px;

	/* Border radius variables */
	--radius-0: 0;
	--radius-0-5: var(--space-2);
	--radius-1: var(--space-4);
	--radius-1-5: var(--space-6);
	--radius-2: var(--space-8);
	--radius-2-5: var(--space-10);
	--radius-3: var(--space-12);
	--radius-4: var(--space-16);
	--radius-5: var(--space-20);
	--radius-6: var(--space-24);
	--radius-8: var(--space-32);
	--radius-full: 9999px; /* pill / stadium */
	--radius-circle: 50%; /* circle (avatars) */
	/* DEPRECATED t-shirt aliases → ordinal. Kept so in-flight branches keep
	   resolving; */
	--radius-none: var(--radius-0);
	--radius-xxs: var(--radius-0-5);
	--radius-xs: var(--radius-1);
	--radius-s: var(--radius-2);
	--radius-m: var(--radius-3);
	--radius-base: var(--radius-4);
	--radius-l: var(--radius-5);
	--radius-xl: var(--radius-6);
	--radius-xxl: var(--radius-8);

	/* Border width variables. */
	--border-0: 0; /* no border, as a state */
	--border-1: 1px; /* default hairline — dividers, input outlines, card edges */
	--border-2: 2px; /* emphasis — selected, active */

	/* Gray */
	--gray-modern-0: #ffffff;
	--gray-modern-25: #fcfcfd;
	--gray-modern-50: #f8fafc;
	--gray-modern-100: #f1f5f9;
	--gray-modern-200: #e2e8f0;
	--gray-modern-300: #cbd5e1;
	--gray-modern-400: #94a3b8;
	--gray-modern-500: #64748b;
	--gray-modern-600: #475569;
	--gray-modern-700: #334155;
	--gray-modern-800: #1e293b;
	--gray-modern-900: #0f172a;

	/* Charcoal  */
	--charcoal-200: #525252;
	--charcoal-300: #3b3b3b;
	--charcoal-400: #323232;
	--charcoal-500: #292929;
	--charcoal-600: #1d1d1d;
	--charcoal-700: #141414;

	/* Charcoal elevation  */
	--charcoal-elevation-25: #eaeaea;
	--charcoal-elevation-50: #bfbfbf;
	--charcoal-elevation-100: #8b8b8b;
	--charcoal-elevation-200: #767676;
	--charcoal-elevation-300: #696969;
	--charcoal-elevation-400: #545454;
	--charcoal-elevation-500: #3e3e3e;
	--charcoal-elevation-600: #363636;
	--charcoal-elevation-700: #2f2f2f;
	--charcoal-elevation-800: #2d2d2d;

	/* Neutral — unified dark-neutral scale (new canonical name; supersedes charcoal + charcoal-elevation, which are aliased into it above). */
	--neutral-0: #ffffff;
	--neutral-50: #fafafa;
	--neutral-100: #f5f5f5;
	--neutral-200: #e5e5e5;
	--neutral-300: #d4d4d4;
	--neutral-400: #a3a3a3;
	--neutral-500: #737373;
	--neutral-550: #626262;
	--neutral-600: #525252;
	--neutral-700: #404040;
	--neutral-800: #262626;
	--neutral-850: #1f1f1f;
	--neutral-900: #171717;
	--neutral-925: #101010;
	--neutral-950: #0a0a0a;

	/* Purple Brand*/
	--purple-brand-25: #fafaff;
	--purple-brand-50: #f4f3fd;
	--purple-brand-100: #eceafd;
	--purple-brand-200: #dbd7fd;
	--purple-brand-300: #cdc7fe;
	--purple-brand-400: #a69cfe;
	--purple-brand-500: #5f4dff;
	--purple-brand-600: #5546dd;
	--purple-brand-700: #4b3fbb;
	--purple-brand-800: #373077;
	--purple-brand-900: #2a274a;
	--purple-brand-950: #22202d;

	/* Blue Vurvey */
	--blue-vurvey-25: #ededf5;
	--blue-vurvey-50: #c8c8de;
	--blue-vurvey-100: #b7b7cf;
	--blue-vurvey-200: #9494b1;
	--blue-vurvey-300: #717092;
	--blue-vurvey-400: #4e4d74;
	--blue-vurvey-500: #2b2a56;
	--blue-vurvey-600: #222245;
	--blue-vurvey-700: #1a1934;
	--blue-vurvey-800: #111122;
	--blue-vurvey-900: #090811;

	/* Volt */
	--volt-50: #fdffe5;
	--volt-100: #fbffcc;
	--volt-200: #f9ffb2;
	--volt-300: #f6ff99;
	--volt-400: #f3ff52;
	--volt-500: #eaff00;
	--volt-600: #d7ea00;
	--volt-700: #a6b500;
	--volt-800: #7d8900;
	--volt-900: #5b6400;

	/* Red */
	--red-25: #fffbfa;
	--red-50: #fef2f2;
	--red-100: #fee2e2;
	--red-200: #fecaca;
	--red-300: #fca5a5;
	--red-400: #f87171;
	--red-500: #ef4444;
	--red-600: #dc2626;
	--red-700: #b91c1c;
	--red-800: #991b1b;
	--red-900: #7f1d1d;

	/* Red muted — dark-mode danger family (product-specific) */
	--red-muted-400: #cc7a73;
	--red-muted-500: #bf5852;
	--red-muted-600: #9e4944;
	--red-muted-900: #3b1a17;

	/* Pink dirty */
	--pink-dirty-25: #f8eef0;
	--pink-dirty-50: #f2dde1;
	--pink-dirty-100: #ebccd3;
	--pink-dirty-200: #e5bbc4;
	--pink-dirty-300: #d79aa6;
	--pink-dirty-400: #ca7889;
	--pink-dirty-500: #bd566b;
	--pink-dirty-600: #9c4758;
	--pink-dirty-700: #7b3845;
	--pink-dirty-800: #5b2833;
	--pink-dirty-900: #3a1920;

	/* Teal */
	--teal-25: #ddfbf8;
	--teal-50: #f0fdfa;
	--teal-100: #ccfbf1;
	--teal-200: #99f6e4;
	--teal-300: #5eead4;
	--teal-400: #2dd4bf;
	--teal-500: #14b8a6;
	--teal-600: #0d9488;
	--teal-700: #0f766e;
	--teal-800: #115e59;
	--teal-900: #134e4a;

	/* Purple modern */
	--purple-modern-25: #fcfaff;
	--purple-modern-50: #faf5ff;
	--purple-modern-100: #f3e8ff;
	--purple-modern-200: #e9d5ff;
	--purple-modern-300: #d8b4fe;
	--purple-modern-400: #c084fc;
	--purple-modern-500: #a855f7;
	--purple-modern-600: #9333ea;
	--purple-modern-700: #7e22ce;
	--purple-modern-800: #6b21a8;
	--purple-modern-900: #581c87;

	/* Cyan */
	--cyan-25: #f5feff;
	--cyan-50: #ecfeff;
	--cyan-100: #cffafe;
	--cyan-200: #a5f3fc;
	--cyan-300: #67e8f9;
	--cyan-400: #22d3ee;
	--cyan-500: #06b6d4;
	--cyan-600: #0891b2;
	--cyan-700: #0e7490;
	--cyan-800: #155e75;
	--cyan-900: #164e63;

	/* Lime */
	--lime-25: #f9fef3;
	--lime-50: #f2fee5;
	--lime-100: #e3fbcc;
	--lime-200: #d0f8ab;
	--lime-300: #a6ef67;
	--lime-400: #85e13a;
	--lime-500: #66c61c;
	--lime-600: #4ca30d;
	--lime-700: #3b7c0f;
	--lime-800: #326212;
	--lime-900: #2b5314;

	/* Green Vurvey (emerald) */
	--green-vurvey-25: #f0fdf9;
	--green-vurvey-50: #ecfdf5;
	--green-vurvey-100: #d1fae5;
	--green-vurvey-200: #a7f3d0;
	--green-vurvey-300: #6ee7b7;
	--green-vurvey-400: #34d399;
	--green-vurvey-500: #10b981;
	--green-vurvey-600: #059669;
	--green-vurvey-700: #047857;
	--green-vurvey-800: #065f46;
	--green-vurvey-900: #064e3b;

	/* Tailwind Green  */
	--green-50: #f0fdf4;
	--green-100: #dcfce7;
	--green-200: #bbf7d0;
	--green-300: #86efac;
	--green-400: #4ade80;
	--green-500: #22c55e;
	--green-600: #16a34a;
	--green-700: #15803d;
	--green-800: #166534;
	--green-900: #14532d;
	--green-950: #052e16;

	/* Blue Dark */

	--blue-dark-25: #f5f8ff;
	--blue-dark-50: #eff6ff;
	--blue-dark-100: #dbeafe;
	--blue-dark-200: #bfdbfe;
	--blue-dark-300: #93c5fd;
	--blue-dark-400: #60a5fa;
	--blue-dark-500: #3b82f6;
	--blue-dark-600: #2563eb;
	--blue-dark-700: #1d4ed8;
	--blue-dark-800: #1e40af;
	--blue-dark-900: #1e3a8a;

	/* Yellow — the accent / decorative warm family, also available for data-viz.
	   Never a status colour. */

	--yellow-25: #fefcf0;
	--yellow-50: #fefce8;
	--yellow-100: #fef9c3;
	--yellow-200: #fef08a;
	--yellow-300: #fde047;
	--yellow-400: #facc15;
	--yellow-500: #eab308;
	--yellow-600: #ca8a04;
	--yellow-700: #a16207;
	--yellow-800: #854d0e;
	--yellow-900: #713f12;

	/* Amber — the warning / caution status family. */
	--amber-25: #fffdf5;
	--amber-50: #fffbeb;
	--amber-100: #fef3c7;
	--amber-200: #fde68a;
	--amber-300: #fcd34d;
	--amber-400: #fbbf24;
	--amber-500: #f59e0b;
	--amber-600: #d97706;
	--amber-700: #b45309;
	--amber-800: #92400e;
	--amber-900: #78350f;

	/* Social */
	--color-tiktok: #fe2858;
	--color-tiktok-secondary: #692937;

	--color-reddit: #ff4500;
	--color-reddit-secondary: #7a1f00;

	--color-linkedin: #0173b2;
	--color-linkedin-secondary: #1d3f52;

	--color-youtube: #ff0000;
	--color-youtube-secondary: #850000;

	--color-x-twitter: #000000;
	--color-x-twitter-secondary: #1f1f1f;

	--color-instagram: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
	--color-instagram-secondary: #5851db;

	--color-text-body: var(--gray-modern-900);
	--color-text-secondary: var(--gray-modern-700);
	--color-text-tertiary: var(--gray-modern-600);

	--color-background: var(--app-color-surface);
	--color-background-secondary: var(--gray-modern-200);
	--color-background-old: var(--gray-modern-50);
	--color-card-background: var(--gray-modern-50);
	--color-border-container: var(--gray-modern-200);
	--color-border: var(--gray-modern-300);
	--color-border-hover-brand: var(--blue-vurvey-100);
	--color-modal-background: var(--gray-modern-50);
	--color-background-element: var(--gray-modern-50);
	--color-text-card: var(--purple-brand-700);
	--color-border-soft: var(--gray-modern-100);

	--color-brand: var(--purple-brand-500);
	--color-brand-purple: var(--purple-brand-500);

	--color-navigation-background: var(--gray-modern-200);
	--color-scrollbar-thumb: var(--gray-modern-300);
	--color-scrollbar-thumb-hover: var(--gray-modern-500);
	--color-scrollbar-track: transparent;

	/* Brand Companion Theme Colors */
	/* These are overridden by user selections on the Brand Settings page, including them here for autocompletion */

	--md-sys-color-primary: #3f5f90;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #d6e3ff;
	--md-sys-color-on-primary-container: #254777;
	--md-sys-color-primary-dim: #325383;
	--md-sys-color-primary-fixed: #d6e3ff;
	--md-sys-color-on-primary-fixed: #001b3d;
	--md-sys-color-on-primary-fixed-variant: #254777;
	--md-sys-color-primary-fixed-dim: #a8c8ff;
	--md-sys-color-secondary: #555f71;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #d9e3f8;
	--md-sys-color-on-secondary-container: #3e4758;
	--md-sys-color-secondary-dim: #495365;
	--md-sys-color-secondary-fixed: #d9e3f8;
	--md-sys-color-on-secondary-fixed: #121c2b;
	--md-sys-color-on-secondary-fixed-variant: #3e4758;
	--md-sys-color-secondary-fixed-dim: #bdc7dc;
	--md-sys-color-surface: #f9f9ff;
	--md-sys-color-surface-variant: #f1dee4;
	--md-sys-color-surface-dim: #d9d9e0;
	--md-sys-color-surface-bright: #f9f9ff;
	--md-sys-color-surface-container-lowest: #ffffff;
	--md-sys-color-surface-container-low: #f3f3fa;
	--md-sys-color-surface-container: #ededf4;
	--md-sys-color-surface-container-high: #e7e8ee;
	--md-sys-color-surface-container-highest: #e2e2e9;
	--md-sys-color-on-surface: #191c20;
	--md-sys-color-on-surface-variant: #43474e;
	--md-sys-color-tertiary: #6f5675;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #f9d8fe;
	--md-sys-color-on-tertiary-container: #563e5c;
	--md-sys-color-tertiary-dim: #624a69;
	--md-sys-color-tertiary-fixed: #f9d8fe;
	--md-sys-color-on-tertiary-fixed: #28132f;
	--md-sys-color-on-tertiary-fixed-variant: #563e5c;
	--md-sys-color-tertiary-fixed-dim: #dcbce1;
	--md-sys-color-background: #f9f9ff;
	--md-sys-color-on-background: #191c20;
	--md-sys-color-inverse-surface: #2e3035;
	--md-sys-color-inverse-on-surface: #f0f0f7;
	--md-sys-color-inverse-primary: #a8c8ff;
	--md-sys-color-outline: #74777f;
	--md-sys-color-outline-variant: #c4c6cf;
	/* The error family is the one M3 group this default palette left incomplete: -dim and
	   -on-container shipped without the three roles they qualify, so every guest-mode danger
	   affordance resolved to nothing. Bound to the app's error roles so an unbranded workspace
	   gets a themed red and a brand that supplies its own still overrides all five. */
	--md-sys-color-error: var(--app-color-error);
	--md-sys-color-on-error: var(--app-color-on-error);
	--md-sys-color-error-container: var(--app-color-error-container);
	--md-sys-color-error-dim: #a80710;
	--md-sys-color-on-error-container: var(--app-color-on-error-container);
	--md-sys-color-shadow: #000000;
	--md-sys-color-scrim: #000000;

	/* Input element filters */
	--input-calendar-picker-filter: invert(0) brightness(0.5);
	--max-zindex: 1000000;
}

/* The shell marks its own overlay when it mounts the command-palette opener beside the
   hamburger, and the reservation widens by one more control. Keyed off the shell rather than
   counted twice, so adding or removing an overlay control cannot leave the title band reserving
   for a number of controls the overlay no longer has.
   Not scoped to a media query on purpose: only mobile-native-page-header consumes this, and it
   consumes it inside mobile-only already. Restating the breakpoint here would copy a Sass
   variable into plain CSS, which is the drift this property exists to stop. */
:root:has([data-palette-opener]) {
	--mobile-overlay-leading: calc(2 * (var(--space-8) + var(--mobile-touch-target)));
}

/* Theme variables, these should be preferred over direct color usage */
:root {
	/* Abstracted theme variables */
	--color-brand-hover: var(--purple-brand-600);
	--color-brand-foreground: var(--purple-brand-25);
	--color-brand-text: var(--purple-brand-800);
	--color-brand-subtle: var(--purple-brand-200);
	--color-brand-outline: var(--purple-brand-700);

	/* Danger / destructive feedback */
	--color-danger: var(--red-700);
	--color-danger-hover: var(--red-800);
	--color-danger-foreground: var(--red-100);
	--color-danger-text: var(--red-800);
	--color-danger-subtle: var(--red-50);
	--color-danger-outline: var(--red-900);

	/* Success + warning. Warning is the amber family; yellow is decorative and
	   never reads as a status. The -subtle washes stay literal alpha because the
	   generated design.md only resolves var() indirection, not color-mix(). */
	--color-success: #16a34a;
	--color-success-subtle: rgba(22, 163, 74, 0.15);
	--color-success-foreground: #ffffff;
	--color-warning: var(--amber-600);
	--color-warning-subtle: rgba(217, 119, 6, 0.15);
	--color-warning-foreground: var(--neutral-0);

	/* AI / assistant accent */
	--color-ai: var(--charcoal-500);
	--color-ai-hover: var(--charcoal-700);
	--color-ai-foreground: var(--charcoal-elevation-25);

	/* Capability card accents (insight / concept). Built on the yellow/violet
	   palettes above, with dark-theme overrides below; the evaluation accent
	   uses the green-vurvey (emerald) tokens directly at call sites. Yellow
	   rather than amber, which is reserved for the warning role. */
	--card-accent-yellow: var(--yellow-500);
	--card-accent-violet: var(--purple-modern-500);

	/* Neutral-surface button + chip palette */
	--color-surface-muted: var(--gray-modern-50);
	--color-surface-muted-hover: var(--gray-modern-200);
	--color-surface-muted-foreground: var(--gray-modern-800);
	--color-surface-active: var(--gray-modern-700);
	--color-surface-active-foreground: var(--charcoal-elevation-25);

	/* Disabled-control tokens */
	--color-control-disabled-bg: var(--gray-modern-300);
	--color-control-disabled-foreground: var(--gray-modern-400);
	--color-control-disabled-border: var(--gray-modern-300);

	/* Neutral outlined border (e.g. a default outlined Button) */
	--color-outline-default: var(--gray-modern-500);

	/* Card hover + focus surfaces */
	--color-card-background-hover: var(--gray-modern-100);
	--color-card-focus-ring: var(--purple-brand-500);
	--color-card-focus-ring-bg: var(--charcoal-elevation-25);

	/* The app-wide keyboard focus ring. Aliased rather than re-declared so the dark and
	   2026-preview overrides of the card ring carry it without a second list. */
	--color-focus-ring: var(--color-card-focus-ring);

	/* Elevation shadows — alpha-based so they adapt per theme */
	--color-shadow-elevation: rgba(0, 0, 0, 0.1);
	--color-shadow-elevation-strong: rgba(0, 0, 0, 0.15);
	--color-shadow-brand-glow: rgba(139, 92, 246, 0.15);
}

:root {
	/* Surfaces — M3 tonal elevation. Light: higher elevation = darker.
	   Rungs are the Semantics 2026 values; the spec repeats -lowest and -low at #ffffff, so
	   every role above -low sat one rung too dark while this ramp never repeated. That put
	   -container-high on #e5e5e5, the same value as --app-color-outline-variant below, which
	   is why a filled surface and its own hairline resolved to one colour. */
	--app-color-surface: var(--neutral-50); /* #fafafa */
	--app-color-surface-container-lowest: var(--neutral-0); /* #ffffff */
	--app-color-surface-container-low: var(--neutral-0); /* #ffffff */
	--app-color-surface-container: var(--neutral-50); /* #fafafa */
	--app-color-surface-container-high: var(--neutral-100); /* #f5f5f5 */
	--app-color-surface-container-highest: var(--neutral-200); /* #e5e5e5 */

	/* On-colors — text and icons (icons bind on-* as stroke) */
	--app-color-on-surface: var(--neutral-900);
	--app-color-on-background: var(--neutral-900);
	--app-color-on-surface-variant: var(--neutral-700);
	--app-color-on-surface-subtle: var(--neutral-550);

	/* Outlines — borders and dividers.
	   `outline` is the resting edge of an interactive control, so it is read against the
	   disabled fill rather than against the page: at --neutral-300 the two were 17/255 apart
	   and the disabled state stopped reading. --neutral-400 is the spec value and the reason
	   it moved. `outline-variant` (row rules, tag borders) already matched and is unchanged. */
	--app-color-outline: var(--neutral-400); /* #a3a3a3 */
	--app-color-outline-variant: var(--neutral-200); /* #e5e5e5 */

	/* Selection — neutral selected/active surface */
	--app-color-secondary-container: var(--neutral-200);
	--app-color-on-secondary-container: var(--neutral-900);

	/* Inverse — tooltips, snackbars, inverted chips */
	--app-color-inverse-surface: var(--neutral-900);
	--app-color-inverse-on-surface: var(--neutral-0);
	--app-color-inverse-primary: var(--purple-brand-400);

	/* Brand (primary) — one purple role, both modes */
	--app-color-primary: var(--purple-brand-500);
	--app-color-on-primary: var(--neutral-0);
	--app-color-primary-container: var(--purple-brand-100);
	--app-color-on-primary-container: var(--purple-brand-700);

	/* Feedback families — status color. Solid base carries icons/short labels; copy goes on the tonal pair.
	   border is a decorative tonal edge, not a boundary — must-be-seen state binds the family base. */
	--app-color-error: var(--red-600);
	--app-color-on-error: var(--neutral-0);
	--app-color-error-container: var(--red-50);
	--app-color-on-error-container: var(--red-800);
	--app-color-error-border: var(--red-200);

	--app-color-success: var(--green-600);
	--app-color-on-success: var(--neutral-0);
	--app-color-success-container: var(--green-50);
	--app-color-on-success-container: var(--green-800);
	--app-color-success-border: var(--green-200);

	--app-color-warning: var(--amber-600);
	--app-color-on-warning: var(--neutral-0);
	--app-color-warning-container: var(--amber-50);
	--app-color-on-warning-container: var(--amber-800);
	--app-color-warning-border: var(--amber-200);

	--app-color-info: var(--blue-dark-600);
	--app-color-on-info: var(--neutral-0);
	--app-color-info-container: var(--blue-dark-50);
	--app-color-on-info-container: var(--blue-dark-800);
	--app-color-info-border: var(--blue-dark-200);

	/* State-layer opacities — on-color overlays at fixed alpha (mode-independent) */
	--app-color-state-hover: 0.08;
	--app-color-state-focus: 0.1;
	--app-color-state-pressed: 0.1;
	--app-color-state-dragged: 0.16;
	--app-color-state-disabled-content: 0.38;
	--app-color-state-disabled-container: 0.12;

	/* ADR-0011's state layer, composed once. An on-colour ink at a ratified state opacity;
	   color-mix rather than an overlay node so a component that already owns its pseudo-elements
	   can still use it, which paints the same result over an opaque surface. Both halves are
	   existing tokens, so this adds no colour decision — it re-points with every theme. */
	--state-layer-hover: color-mix(
		in srgb,
		var(--color-text-body) calc(var(--app-color-state-hover) * 100%),
		transparent
	);
	--state-layer-pressed: color-mix(
		in srgb,
		var(--color-text-body) calc(var(--app-color-state-pressed) * 100%),
		transparent
	);

	/* Focus ring & selection — focus-ring is neutral and must never alias primary (survives the volt swap).
	   Ring composes alpha at point of use via color-mix; opacity is 0–100, consumed as calc(x * 1%). */
	--app-color-state-focus-ring: var(--neutral-500);
	--app-color-state-focus-ring-width: 3px;
	--app-color-state-focus-ring-offset: 0;
	--app-color-state-focus-ring-opacity: 50;
	--app-color-state-selected: var(--app-color-primary);

	/* Utility (mode-independent) — scrim is black @ 40%; shadow effect sets its own alpha */
	--app-color-scrim: rgba(0, 0, 0, 0.4);
	--app-color-shadow: #000000;
}

/* Elevation ladder */
:root {
	--shadow-resting:
		0 1px 0 0 color-mix(in srgb, var(--color-text-body) 4%, transparent),
		0 2px 6px -1px color-mix(in srgb, var(--color-text-body) 5%, transparent),
		0 8px 24px -6px color-mix(in srgb, var(--color-text-body) 8%, transparent);
	--shadow-raised:
		0 1px 0 0 color-mix(in srgb, var(--color-text-body) 5%, transparent),
		0 4px 12px -2px color-mix(in srgb, var(--color-text-body) 8%, transparent),
		0 24px 48px -12px color-mix(in srgb, var(--color-text-body) 12%, transparent);
	/* Overlay is its own rung, not an alias of raised. It is the effect style
	   `Elevation/Overlay/Light`: three stacked layers, cited as literals because the generated
	   token layer deliberately does not carry the six Elevation/* styles, so there is nothing to
	   bind. Aliasing raised made every overlay about a quarter shallower than the style (blur
	   12/48 against 20/64, spread -2/-12 against -4/-16) and tinted it with --color-text-body,
	   which is --gray-modern-900 #0f172a — a blue slate where the style is neutral #171717.
	   --neutral-900 IS #171717, so this is the style's own value, not a nearby one. */
	--shadow-overlay:
		0 1px 0 0 color-mix(in srgb, var(--neutral-900) 6%, transparent),
		0 8px 20px -4px color-mix(in srgb, var(--neutral-900) 10%, transparent),
		0 32px 64px -16px color-mix(in srgb, var(--neutral-900) 16%, transparent);
}
/* global overrides */
html {
	box-sizing: border-box;
	font-size: 10px;
	font-family: "Inter", batterii-brand, sans-serif;
	/* 100vh is the viewport with the mobile URL bar hidden, so a full-height app is taller than
	   what the phone actually shows and its bottom row sits under the browser chrome. dvh tracks
	   the visible height; the vh line stays as the fallback for browsers without dvh. */
	height: 100vh;
	height: 100dvh;
	background-color: var(--color-background);

	/* Mobile: Prevent horizontal scrolling */
	@media (max-width: 779px) {
		overflow-x: hidden;
	}
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
body {
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	border: 0;
	height: 100vh;
	height: 100dvh;

	/* Mobile: Prevent horizontal scrolling and improve touch scrolling */
	@media (max-width: 779px) {
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		/* Prevent zoom on input focus in iOS */
		-webkit-text-size-adjust: 100%;
		/* The grey flash on every tap is the loudest "this is a web page" tell. Controls draw
		   their own pressed state, so the platform highlight only doubles it. */
		-webkit-tap-highlight-color: transparent;
		/* Keep a scroll that reaches the end of a pane inside that pane instead of rubber-banding
		   the whole document behind it. */
		overscroll-behavior-y: contain;
	}
}
@layer base, components, features;
@layer base {
	b,
	strong {
		font-weight: 600;
	}
	#root {
		height: 100%;
		background-color: var(--app-color-surface-container);
	}

	h1 {
		font-weight: 500;
		font-size: 3.2rem;
		line-height: 4rem;

		/* Mobile: Smaller heading sizes */
		@media (max-width: 779px) {
			font-size: 2.4rem;
			line-height: 3rem;
		}
	}
	h2 {
		font-size: 2.1rem;
		line-height: 2.4rem;
		font-weight: 600;

		/* Mobile: Smaller heading sizes */
		@media (max-width: 779px) {
			font-size: 1.8rem;
			line-height: 2.2rem;
		}
	}

	p {
		margin: 0;
	}
}

html.dark-theme {
	color-scheme: dark;
	--color-text-body: var(--charcoal-elevation-25);
	--color-text-secondary: var(--charcoal-elevation-50);
	--color-text-tertiary: var(--charcoal-elevation-100);

	--color-background-secondary: var(--charcoal-700);
	--color-background-old: var(--charcoal-600);
	--color-card-background: var(--app-color-surface-container-lowest);
	/* Both of these sat at their light values in dark mode: a near-white element surface, and a card
	   that flashed near-white on hover. The light theme puts element on the same rung as card and
	   hover one rung above it, so the dark rungs are the same two. */
	--color-background-element: var(--app-color-surface-container-lowest);
	--color-card-background-hover: var(--app-color-surface-container-low);
	--color-border-container: var(--charcoal-elevation-500);
	--color-border: var(--charcoal-elevation-400);
	--color-border-hover-brand: var(--charcoal-elevation-400);
	--color-modal-background: var(--charcoal-500);
	--color-text-card: var(--purple-brand-300);
	--color-border-soft: var(--charcoal-elevation-600);

	--color-brand: var(--volt-500);
	--color-brand-purple: var(--purple-brand-400);

	--color-navigation-background: var(--charcoal-700);
	--color-scrollbar-thumb: var(--charcoal-elevation-400);
	--color-scrollbar-thumb-hover: var(--charcoal-elevation-200);
	--color-scrollbar-track: transparent;

	/* Input element filters */
	--input-calendar-picker-filter: invert(1) brightness(1.2);
	--element-shadow: none;
}

/* Theme variables, these should be preferred over direct color usage */
html.dark-theme {
	color-scheme: dark;
	--color-brand-hover: var(--volt-600);
	--color-brand-foreground: var(--charcoal-600);
	--color-brand-text: var(--volt-500);
	--color-brand-subtle: var(--charcoal-elevation-600);
	--color-brand-outline: var(--charcoal-elevation-100);
	--color-danger: var(--red-muted-500);
	--color-danger-hover: var(--red-muted-400);
	--color-danger-foreground: var(--charcoal-600);
	--color-danger-text: var(--red-muted-400);
	--color-danger-subtle: var(--red-muted-900);
	--color-danger-outline: var(--red-muted-600);
	/* Success and warning were declared once, in :root, as literals. Danger has always flipped here,
	   so on a dark surface the three status colours disagreed: the error tone adapted and the other
	   two kept their light-mode ink. Same shape as danger — a brighter role, dark ink on it, a deep
	   container for the subtle tint. */
	--color-success: var(--green-vurvey-400);
	--color-success-foreground: var(--charcoal-600);
	--color-success-subtle: var(--green-vurvey-900);
	--color-warning: var(--amber-400);
	--color-warning-foreground: var(--charcoal-600);
	--color-warning-subtle: var(--amber-900);
	--color-ai: var(--volt-500);
	--color-ai-hover: var(--volt-600);
	--color-ai-foreground: var(--charcoal-elevation-700);
	--color-surface-muted: transparent;
	--color-surface-muted-hover: var(--charcoal-elevation-600);
	--color-surface-muted-foreground: var(--charcoal-elevation-25);
	--color-surface-active: var(--charcoal-elevation-50);
	--color-surface-active-foreground: var(--charcoal-600);
	--color-control-disabled-bg: var(--gray-modern-600);
	--color-control-disabled-foreground: var(--gray-modern-500);
	--color-control-disabled-border: var(--charcoal-elevation-500);
	--color-outline-default: var(--charcoal-elevation-100);
	--color-card-focus-ring: var(--purple-brand-500);
	--color-card-focus-ring-bg: var(--charcoal-elevation-800);
	--color-shadow-elevation: rgba(0, 0, 0, 0.5);
	--color-shadow-elevation-strong: rgba(0, 0, 0, 0.7);
	--color-shadow-brand-glow: rgba(234, 255, 0, 0.2);

	/* Capability card accents — one step lighter for contrast on dark surfaces */
	--card-accent-yellow: var(--yellow-400);
	--card-accent-violet: var(--purple-modern-400);
}

html.dark-theme {
	--app-color-surface: color-mix(in srgb, var(--neutral-950), var(--purple-brand-300) 5%);
	--app-color-surface-container-lowest: color-mix(in srgb, var(--neutral-850), var(--purple-brand-300) 4%);
	--app-color-surface-container-low: color-mix(in srgb, var(--neutral-850), var(--purple-brand-300) 6%);
	--app-color-surface-container: color-mix(in srgb, var(--neutral-850), var(--purple-brand-300) 8%);
	--app-color-surface-container-high: color-mix(in srgb, var(--neutral-700), var(--purple-brand-300) 11%);
	--app-color-surface-container-highest: color-mix(in srgb, var(--neutral-600), var(--purple-brand-300) 14%);

	/* On-colors */
	--app-color-on-surface: var(--neutral-50);
	--app-color-on-background: var(--neutral-50);
	--app-color-on-surface-variant: var(--neutral-300);
	--app-color-on-surface-subtle: var(--neutral-400);

	/* --neutral-500 rather than --neutral-700: at -700 this expression was character-for-character
	   the same as --app-color-surface-container-high above, so a bordered control filled with that
	   role had no visible edge at all in dark. -500 is the rung the spec's dark outline sits on,
	   carried through this ramp's own tint so it stays in step with -variant below. */
	--app-color-outline: color-mix(in srgb, var(--neutral-500), var(--purple-brand-300) 11%);
	--app-color-outline-variant: color-mix(in srgb, var(--neutral-800), var(--purple-brand-300) 11%);

	/* Selection */
	--app-color-secondary-container: var(--neutral-700);
	--app-color-on-secondary-container: var(--neutral-50);

	/* Inverse */
	--app-color-inverse-surface: var(--neutral-50);
	--app-color-inverse-on-surface: var(--neutral-900);
	--app-color-inverse-primary: var(--purple-brand-500);

	/* Brand (primary) — lightens (500 → 400); primary-container goes neutral in dark */
	--app-color-primary: var(--purple-brand-400);
	--app-color-on-primary: var(--neutral-900);
	--app-color-primary-container: var(--neutral-800);
	--app-color-on-primary-container: var(--purple-brand-300);

	/* Feedback families — base lightens, container darkens, on-container lightens */
	--app-color-error: var(--red-400);
	--app-color-on-error: var(--neutral-950);
	--app-color-error-container: var(--red-900);
	--app-color-on-error-container: var(--red-300);
	--app-color-error-border: var(--red-700);

	--app-color-success: var(--green-400);
	--app-color-on-success: var(--neutral-950);
	--app-color-success-container: var(--green-900);
	--app-color-on-success-container: var(--green-300);
	--app-color-success-border: var(--green-700);

	--app-color-warning: var(--amber-400);
	--app-color-on-warning: var(--neutral-950);
	--app-color-warning-container: var(--amber-900);
	--app-color-on-warning-container: var(--amber-300);
	--app-color-warning-border: var(--amber-700);

	--app-color-info: var(--blue-dark-400);
	--app-color-on-info: var(--neutral-950);
	--app-color-info-container: var(--blue-dark-900);
	--app-color-on-info-container: var(--blue-dark-300);
	--app-color-info-border: var(--blue-dark-700);

	/* Focus ring — neutral, lighter step for dark surfaces */
	--app-color-state-focus-ring: var(--neutral-400);

	/* Shadows */
	--app-color-shadow: var(--neutral-700);
}

/* Elevation ladder. Charcoal-tinted, higher alpha;
   the tonal surface ladder shares the lift, so shadow is the second signal. */
html.dark-theme {
	--shadow-resting:
		0 1px 0 0 color-mix(in srgb, var(--charcoal-700) 40%, transparent),
		0 2px 6px -1px color-mix(in srgb, var(--charcoal-700) 35%, transparent),
		0 8px 24px -6px color-mix(in srgb, var(--charcoal-700) 50%, transparent);
	--shadow-raised:
		0 1px 0 0 color-mix(in srgb, var(--charcoal-700) 50%, transparent),
		0 4px 12px -2px color-mix(in srgb, var(--charcoal-700) 45%, transparent),
		0 24px 48px -12px color-mix(in srgb, var(--charcoal-700) 60%, transparent);
	/* Overlay no longer aliases raised at :root, so the dark rung has to be stated or overlays
	   would paint the light elevation here — three layers of #171717 at 6-16% over a near-black
	   surface, which is no shadow at all. The design system has the same gap on purpose and
	   records it (candidates/src/popover/popover.css:75-86: the dark Elevation sibling is not
	   in the generated layer, so the candidate paints the light style in dark and says so rather
	   than inventing a token). That is the spec declaring a gap, not specifying light-in-dark, so
	   it is not something to copy into an app that already has a working dark ladder. */
	--shadow-overlay: var(--shadow-raised);
}

html.guest-mode {
	--guest-mode-color-background: var(--md-sys-color-secondary-container);
	--color-text-body: var(--md-sys-color-on-surface);
	--color-text-secondary: var(--md-sys-color-on-surface-variant);
	--color-text-tertiary: var(--md-sys-color-outline);

	--color-background: var(--md-sys-color-background);
	--color-background-secondary: var(--md-sys-color-surface-container);
	--color-background-old: var(--md-sys-color-background);
	--color-card-background: var(--md-sys-color-surface-container-low);
	--color-border-container: var(--md-sys-color-outline-variant);
	--color-border: var(--md-sys-color-outline);
	--color-border-hover-brand: var(--md-sys-color-primary-container);
	--color-modal-background: var(--md-sys-color-surface);
	--color-background-element: var(--md-sys-color-surface-container-lowest);
	--color-text-card: var(--md-sys-color-primary);
	--color-border-soft: var(--md-sys-color-surface-variant);

	--color-brand: var(--md-sys-color-primary);
	--color-brand-purple: var(--md-sys-color-primary);

	--color-navigation-background: var(--md-sys-color-surface-container);
	--color-scrollbar-thumb: var(--md-sys-color-outline-variant);
	--color-scrollbar-thumb-hover: var(--md-sys-color-outline);
	--color-scrollbar-track: transparent;
	--guest-top-nav-height: 46px;

	/* Ensure guest mode still overrides the new colors, may be able to cut entirely to the new colors at some point, but we're not there yet */
	/* Surfaces */
	--app-color-surface: var(--md-sys-color-surface);
	--app-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest);
	--app-color-surface-container-low: var(--md-sys-color-surface-container-low);
	--app-color-surface-container: var(--md-sys-color-surface-container);
	--app-color-surface-container-high: var(--md-sys-color-surface-container-high);
	--app-color-surface-container-highest: var(--md-sys-color-surface-container-highest);

	/* On-colors */
	--app-color-on-surface: var(--md-sys-color-on-surface);
	--app-color-on-background: var(--md-sys-color-on-background);
	--app-color-on-surface-variant: var(--md-sys-color-on-surface-variant);

	/* Outlines */
	--app-color-outline: var(--md-sys-color-outline);
	--app-color-outline-variant: var(--md-sys-color-outline-variant);

	/* Selection */
	--app-color-secondary-container: var(--md-sys-color-secondary-container);
	--app-color-on-secondary-container: var(--md-sys-color-on-secondary-container);

	/* Inverse */
	--app-color-inverse-surface: var(--md-sys-color-inverse-surface);
	--app-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
	--app-color-inverse-primary: var(--md-sys-color-inverse-primary);

	/* Primary */
	--app-color-primary: var(--md-sys-color-primary);
	--app-color-on-primary: var(--md-sys-color-on-primary);
	--app-color-primary-container: var(--md-sys-color-primary-container);
	--app-color-on-primary-container: var(--md-sys-color-on-primary-container);
}

/* VU-7039 preview mode. The typography components already render Geist while the document
   renders Inter, so raw elements, form controls and bespoke wrappers sit in a different face
   from the design system beside them. This rebinds the base face for review only; the class
   is applied by DesignSystem2026PreviewRoot and is absent unless the preview flag is on. */
html.ds-2026-preview,
html.ds-2026-preview body,
html.ds-2026-preview input,
html.ds-2026-preview select,
html.ds-2026-preview textarea,
html.ds-2026-preview button {
	font-family: var(--ds-font-family-sans, "Inter", batterii-brand, sans-serif);
}

/* VU-7039 preview mode, part two: the app's own semantic colour tokens re-pointed at the
   2026 roles.

   Most of this app is bespoke per-feature components rather than the shared library, so the
   component adapters reach about 4% of what is on screen. Those bespoke components do
   consume these tokens, so rebinding the tokens is what actually shows the 2026 palette
   across the whole app. Colour only: the two spacing scales share names and differ by 4x
   (--space-4 is 4px here, 16px there), so remapping those would quadruple every gap.

   The --ds-* roles are already re-declared under html.dark-theme and html.guest-mode, so
   dark and guest follow without a second block here. Brand marks (social, ai), shadows and
   the disabled-control set are deliberately left alone: the 2026 state/disabled values are
   percentages rather than colours, and a social colour is not a design-system role. */
html.ds-2026-preview {
	/* The typography components set font-family: var(--font-inter) directly, and a class
	   selector outranks the element rule above, so Body/Caption/Subheader/Header/Display
	   stayed on Inter while everything around them moved to Geist. Rebinding the token
	   reaches all forty stylesheets that read it, rather than overriding each component. */
	--font-inter: var(--ds-font-family-sans);

	/* surfaces */
	--color-background: var(--ds-color-surface-surface);
	--color-background-element: var(--ds-color-surface-surface-container);
	--color-background-secondary: var(--ds-color-surface-surface-container-low);
	--color-card-background: var(--ds-color-surface-surface-container-lowest);
	--color-card-background-hover: var(--ds-color-surface-surface-container-high);
	--color-modal-background: var(--ds-color-surface-surface-container-lowest);
	--color-navigation-background: var(--ds-color-surface-surface-container);
	--color-surface-muted: var(--ds-color-surface-surface-container-high);
	--color-surface-muted-hover: var(--ds-color-surface-surface-container-highest);
	--color-surface-muted-foreground: var(--ds-color-surface-on-surface-variant);
	--color-surface-active: var(--ds-color-primary-primary-container);
	--color-surface-active-foreground: var(--ds-color-primary-on-primary-container);

	/* ink */
	--color-text-body: var(--ds-color-surface-on-surface);
	--color-text-card: var(--ds-color-surface-on-surface);
	--color-text-secondary: var(--ds-color-surface-on-surface-variant);
	--color-text-tertiary: var(--ds-color-surface-on-surface-subtle);

	/* lines */
	--color-border: var(--ds-color-outline-outline);
	--color-border-container: var(--ds-color-outline-outline-variant);
	--color-border-soft: var(--ds-color-outline-outline-variant);
	--color-outline-default: var(--ds-color-outline-outline);
	--color-scrollbar-thumb: var(--ds-color-outline-outline);
	--color-scrollbar-thumb-hover: var(--ds-color-surface-on-surface-subtle);
	--color-scrollbar-track: var(--ds-color-surface-surface-container);

	/* brand. This is the one that changes dark mode most: the app's dark brand is volt
	   while the 2026 dark primary is purple, so preview shows the 2026 answer. */
	--color-brand: var(--ds-color-primary-primary);
	--color-brand-hover: var(--ds-color-primary-primary);
	--color-brand-foreground: var(--ds-color-primary-on-primary);
	--color-brand-subtle: var(--ds-color-primary-primary-container);
	--color-brand-text: var(--ds-color-primary-on-primary-container);
	--color-brand-outline: var(--ds-color-primary-primary);
	--color-brand-purple: var(--ds-color-primary-primary);
	--color-border-hover-brand: var(--ds-color-primary-primary);

	/* status */
	--color-danger: var(--ds-color-state-error-error);
	--color-danger-hover: var(--ds-color-state-error-error);
	--color-danger-foreground: var(--ds-color-state-error-on-error);
	--color-danger-subtle: var(--ds-color-state-error-error-container);
	--color-danger-text: var(--ds-color-state-error-on-error-container);
	--color-danger-outline: var(--ds-color-state-error-error-border);
	--color-success: var(--ds-color-state-success-success);
	--color-success-foreground: var(--ds-color-state-success-on-success);
	--color-success-subtle: var(--ds-color-state-success-success-container);

	/* Glows, focus rings and hover fills are written as rgba() literals, which cannot read a
	   hex token. There is no --ds- rgb-triplet role, so this is the one place the 2026
	   primary is spelled as channels; every call site uses rgba(var(--ds-brand-rgb), A).
	   The literals being replaced are rgb(139, 92, 246), Tailwind violet-500, which is not a
	   Vurvey colour at all. */
	--ds-brand-rgb: 95, 77, 255;
}

/* Dark re-declares --ds-color-primary-primary as #a69cfe, so the channel form follows it. */
html.ds-2026-preview.dark-theme {
	--ds-brand-rgb: 166, 156, 254;
}

/* Keyboard focus, defaulted globally rather than per component.

   Only a minority of stylesheets declare a :focus-visible of their own, so an opt-in convention
   leaves most of the app on the user-agent hairline, which on a near-white surface around a small
   control is close to invisible. This defaults it here instead.

   TWO PROPERTIES OF THIS RULE ARE LOAD-BEARING AND WERE REGRESSED ONCE (EXP-0295). Do not
   "simplify" either without reading this:

   :where() is deliberate. `html.focus-rings :focus-visible` would be (0,2,1) and outrank every
   `.thing:focus-visible` in the app, replacing designed rings with this one. :where() contributes
   nothing, so this stays a (0,1,0) default that any component ring still beats. !important has the
   same effect as raising specificity and is worse, because a component cannot override it at all.

   outline, not box-shadow: box-shadow is load-bearing for elevation on cards and menus, and a
   global override erases it on focus. The 2px offset supplies the light gap that a double-ring
   box-shadow is otherwise there to draw. */
:where(html.focus-rings) :focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* Browsers already limit their default ring to :focus-visible, so this is a guard against
   a component that opted itself back into a plain :focus outline, not a live problem. */
:where(html.focus-rings) :focus:not(:focus-visible) {
	outline: none;
}

/* prefers-reduced-motion: reduce, collapsed globally rather than per component.
   EXP-0040 measured 394 stylesheets declaring a transition/animation and only 96 of them
   guarding it — an opt-in convention that 76% of the app's motion was silently missing, and
   one every new component has to remember on its own. This collapses the default instead:
   nothing animates under reduce-motion unless it deliberately opts back in via the
   `motion-required` mixin (src/styles/_mixins.scss).

   0.01ms, not 0 or `none`: a zero-length animation still fires `animationend`/`transitionend`,
   and any handler that waits on that event to clean up or advance state keeps firing. `none`
   would silently stop it.

   `!important` on a bare universal selector is deliberate, not sloppy: the point of this rule
   is that a missing guard collapses by default, so nothing here should lose to an accidental
   pre-existing selector by luck of specificity or source order. `motion-required` matches it
   with a real class selector plus its own `!important`, which always wins on specificity
   regardless of load order — the only thing that should survive this rule is a deliberate,
   named exemption. */
/* EXP-0368: legacy tokens still read without fallback — alias to modern equivalents so declarations resolve. */
:root {
	--color-primary-100: var(--purple-brand-100);
	--color-primary-200: var(--purple-brand-200);
	--color-primary-300: var(--purple-brand-300);
	--color-primary-500: var(--purple-brand-500);
	--color-primary-600: var(--purple-brand-600);
	--color-primary-800: var(--purple-brand-800);
	--color-primary-900: var(--purple-brand-900);
	--color-primary-rgb: 95, 77, 255;
	--color-primary-light: var(--purple-brand-200);
	--color-primary-lightest: var(--purple-brand-50);
	--primary-500-rgb: 95, 77, 255;
	--purple-brand-500-rgb: 95, 77, 255;
}

@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;
	}
}