:root {
  --brand-name-company: Thepia;
  --brand-name-tagline: Digital Products with a Personal Touch;
  --brand-name-domain: thepia.com;
  --brand-logo-primary: assets/logo.svg;
  --brand-logo-square: assets/logo-square.png;
  --brand-logo-full: assets/logo.png;
  --brand-logo-aspectRatio-primary: 1:1;
  --brand-logo-aspectRatio-square: 1:1;
  --brand-logo-aspectRatio-full: 16:9;
  --brand-colors-primary: #988ACA;
  --brand-colors-primaryLight: #B5A9D9;
  --brand-colors-primaryDark: #7B6BB7;
  --brand-colors-primaryDarker: #654CA3;
  --brand-colors-secondary: #5b9a6f;
  --brand-colors-secondaryLight: #6ba77d;
  --brand-colors-secondaryDark: #4a8a5e;
  --brand-colors-gray: #8B8D98;
  --brand-colors-lightBg: #FFFFFF;
  --brand-colors-darkBg: #111111;
  --brand-illustrations-analysis: assets/manypixels/Analysis_Monochromatic.svg;
  --brand-illustrations-ai: assets/manypixels/Artifical_inteligence_Flatline.svg;
  --brand-illustrations-business: assets/manypixels/Businesswoman_Monochromatic.svg;
  --brand-illustrations-calculator: assets/manypixels/Calculator_Isometric.svg;
  --brand-illustrations-coaching: assets/manypixels/Coach_Flatline.svg;
  --brand-illustrations-coding: assets/manypixels/Coding_Monochromatic.svg;
  --brand-illustrations-consulting: assets/manypixels/Consulting_Monochromatic.svg;
  --brand-illustrations-content: assets/manypixels/Content_creation_Monochromatic.svg;
  --brand-illustrations-dataArranging: assets/manypixels/Data_Arranging_Flatline.svg;
  --brand-illustrations-dataStorage: assets/manypixels/Data_storage_Flatline.svg;
  --brand-illustrations-designer: assets/manypixels/Designer_Monochromatic.svg;
  --brand-illustrations-graphics: assets/manypixels/Graphic_Two_Color.svg;
  --brand-illustrations-presentation: assets/manypixels/Group_Presentation_Monochromatic.svg;
  --brand-illustrations-javascript: assets/manypixels/Javascript_Monochromatic.svg;
  --brand-illustrations-learning: assets/manypixels/Online_lesson_Monochromatic.svg;
  --brand-illustrations-orderConfirmation: assets/manypixels/Order_Confirmation_Outline.svg;
  --brand-illustrations-science: assets/manypixels/Science_Two_Color.svg;
  --brand-illustrations-teamMeeting: assets/manypixels/Team_meeting_Monochromatic.svg;
  --brand-illustrations-time: assets/manypixels/Time_Monochromatic.svg;
  --brand-illustrations-timeline: assets/manypixels/Timeline_Monochromatic.svg;
  --brand-illustrations-waiting: assets/manypixels/Waiting_Monochromatic.svg;
  --brand-illustrations-web: assets/manypixels/World_wide_web_Outline.svg;
  --brand-assets-whitepapers-offboardingMindmap: assets/whitepapers/employee-offboarding-mindmap.png;
  --brand-assets-whitepapers-manualVsGuided: assets/whitepapers/manual-vs-guided.jpg;
  --brand-assets-whitepapers-stakeholderProcess: assets/whitepapers/stakeholder-process.jpg;
  --brand-assets-whitepapers-stakeholderRadar: assets/whitepapers/stakeholder-radar-chart.png;
  --color-text-inverse: #fafafa;
  --color-bg-inverse: #18181b;
  --color-accent: var(--color-palette-green-500);
  --color-accent-hover: var(--color-palette-green-600);
  --color-accent-active: var(--color-palette-green-700);
  --color-accent-subtle: var(--color-palette-green-50);
  --color-accent-muted: var(--color-palette-green-100);
  --color-surface-overlay: rgba(0, 0, 0, 0.5);
  --color-surface-glass-light: rgba(255, 255, 255, 0.72);
  --color-surface-glass-dark: rgba(24, 24, 27, 0.64);
  --color-icon-accent: var(--color-accent);
  --color-icon-inverse: var(--color-text-inverse);
  --color-palette-green-50: #f3f8f5;
  --color-palette-green-100: #e6f0e9;
  --color-palette-green-200: #c0dac9;
  --color-palette-green-300: #9ac4a9;
  --color-palette-green-400: #6ba77d;
  --color-palette-green-500: #5b9a6f;
  --color-palette-green-600: #4a8a5e;
  --color-palette-green-700: #3d7450;
  --color-palette-green-800: #315e41;
  --color-palette-green-900: #254833;
  --color-palette-green-950: #1a3225;
  --color-action-primary-text: var(--color-text-inverse);
  --font-fontFamily-brand-lead: Bembo, EB Garamond, New York, Times, serif;
  --font-fontFamily-brand-body: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, sans-serif;
  --font-fontFamily-brand-mono: JetBrains Mono, SF Mono, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.625rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-size-8xl: 6rem;
  --font-size-9xl: 8rem;
  --font-size-fluid-lg: clamp(1.125rem, 1.0833rem + 0.2083cqi, 1.25rem);
  --font-size-fluid-xl: clamp(1.375rem, 1.3333rem + 0.2083cqi, 1.5rem);
  --font-size-fluid-2xl: clamp(1.625rem, 1.5rem + 0.625cqi, 2rem);
  --font-size-fluid-3xl: clamp(1.875rem, 1.6667rem + 1.0417cqi, 2.5rem);
  --font-size-fluid-4xl: clamp(2.25rem, 2rem + 1.25cqi, 3rem);
  --font-size-fluid-5xl: clamp(3rem, 2.6667rem + 1.6667cqi, 4rem);
  --font-size-fluid-6xl: clamp(3.75rem, 3.3333rem + 2.0833cqi, 5rem);
  --leading-1: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  --icon-size-2xl: 48px;
  --icon-stroke-default: 2;
  --icon-stroke-dense: 1.5;
  --icon-interaction-hoverScale: 1.05;
  --icon-interaction-activeScale: 0.95;
  --icon-interaction-transition: all 0.2s ease;
  --icon-interaction-focusRing: 2px solid var(--color-icon-brand);
  --icon-interaction-focusOffset: 2px;
  --icon-spacing-xs: 0.125rem;
  --icon-spacing-sm: 0.25rem;
  --icon-spacing-md: 0.5rem;
  --icon-spacing-lg: 1rem;
  --icon-spacing-xl: 1.5rem;
  --shadow-input-focus: 0 0 0 3px rgba(152, 138, 202, 0.1);
  --shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.1);
  --size-space-0: 0px;
  --size-space-1: 0.25rem;
  --size-space-2: 0.5rem;
  --size-space-3: 0.75rem;
  --size-space-4: 1rem;
  --size-space-5: 1.25rem;
  --size-space-6: 1.5rem;
  --size-space-8: 2rem;
  --size-space-10: 2.5rem;
  --size-space-12: 3rem;
  --size-space-16: 4rem;
  --size-space-20: 5rem;
  --size-space-24: 6rem;
  --size-space-32: 8rem;
  --size-space-fluid-md: clamp(1rem, 0.8333rem + 0.8333cqi, 1.5rem);
  --size-space-fluid-lg: clamp(2rem, 1.6667rem + 1.6667cqi, 3rem);
  --size-space-fluid-xl: clamp(4rem, 3.3333rem + 3.3333cqi, 6rem);
  --size-space-fluid-2xl: clamp(6rem, 5rem + 5cqi, 9rem);
  --size-space-fluid-3xl: clamp(8rem, 6.6667rem + 6.6667cqi, 12rem);
  --size-radius-0: 0px;
  --size-radius-1: 0.125rem;
  --size-radius-2: 0.25rem;
  --size-radius-3: 0.375rem;
  --size-radius-4: 0.5rem;
  --size-radius-6: 0.75rem;
  --size-radius-8: 1rem;
  --size-radius-12: 1.5rem;
  --size-radius-full: 9999px;
  --size-radius-button: var(--size-radius-full);
  --size-radius-input: var(--size-radius-4);
  --size-stroke-thin: 1px;
  --size-stroke-thick: 2px;
  --width-xs: 20rem;
  --width-sm: 24rem;
  --width-md: 28rem;
  --width-lg: 32rem;
  --width-xl: 36rem;
  --width-2xl: 42rem;
  --width-3xl: 48rem;
  --width-4xl: 56rem;
  --width-5xl: 64rem;
  --width-6xl: 72rem;
  --width-7xl: 80rem;
  --height-desktop-prose: 28px;
  --height-desktop-header: 48px;
  --height-desktop-field: 32px;
  --height-desktop-btn: 32px;
  --height-desktop-compact: 28px;
  --height-desktop-btn0: 24px;
  --height-desktop-hero: 40px;
  --height-desktop-hero-font: 0.95rem;
  --height-desktop-toolbar: 40px;
  --height-desktop-glyph: 16px;
  --height-touch-prose: 28px;
  --height-touch-header: 56px;
  --height-touch-field: 44px;
  --height-touch-btn: 44px;
  --height-touch-compact: 32px;
  --height-touch-btn0: 22px;
  --height-touch-hero: 56px;
  --height-touch-hero-font: 1.1rem;
  --height-touch-toolbar: 44px;
  --height-touch-glyph: 22px;
  --height-xs: 1.5rem;
  --height-sm: 2rem;
  --height-md: 2.5rem;
  --height-lg: 3rem;
  --height-xl: 3.5rem;
  --height-2xl: 4rem;
  --height-3xl: 4.5rem;
  --gap-flow: var(--size-space-4);
  --gap-inline: var(--size-space-2);
  --gap-section: var(--size-space-12);
  --gap-grid: var(--size-space-4);
  --gap-inset: var(--size-space-4);
}

/* Theme-dependent: every --color-* below either IS the neutral/thepia palette,
   or resolves to it through a chain of aliases -- those are the only two palette
   scales with a light AND dark variant (see classifyThemeDependentColorKeys() in
   build/build.js). Still :root-only for now, same value regardless of theme --
   dark redeclaration is a separate, later step. */
:root {
  --color-text-1: var(--color-palette-neutral-12);
  --color-text-2: var(--color-palette-neutral-11);
  --color-text-3: var(--color-palette-neutral-10);
  --color-text-4: var(--color-palette-neutral-9);
  --color-text-primary: var(--color-text-1);
  --color-text-secondary: var(--color-text-2);
  --color-text-brand: var(--color-brand-primary);
  --color-text-success: var(--color-palette-success-11);
  --color-text-warning: var(--color-palette-warning-11);
  --color-text-error: var(--color-palette-error-11);
  --color-text-info: var(--color-palette-info-11);
  --color-text-placeholder: var(--color-palette-neutral-9);
  --color-bg-1: var(--color-palette-neutral-1);
  --color-bg-2: var(--color-palette-neutral-3);
  --color-bg-3: var(--color-palette-neutral-5);
  --color-bg-primary: var(--color-palette-neutral-1);
  --color-bg-brand: var(--color-brand-primary);
  --color-bg-brand-subtle: var(--color-brand-primarySubtle);
  --color-bg-success: var(--color-palette-success-a3);
  --color-bg-warning: var(--color-palette-warning-a3);
  --color-bg-error: var(--color-palette-error-a3);
  --color-bg-info: var(--color-palette-info-a3);
  --color-bg-secondary: var(--color-palette-neutral-3);
  --color-bg-muted: var(--color-palette-neutral-2);
  --color-bg-primary-hover: var(--color-palette-neutral-3);
  --color-bg-secondary-hover: var(--color-palette-neutral-5);
  --color-bg-disabled-input: var(--color-palette-neutral-3);
  --color-bg-disabled-primary: var(--color-palette-neutral-5);
  --color-bg-disabled-secondary: var(--color-palette-neutral-3);
  --color-disabled-text: var(--color-palette-neutral-9);
  --color-border-1: var(--color-palette-neutral-5);
  --color-border-2: var(--color-palette-neutral-7);
  --color-border-3: var(--color-palette-neutral-9);
  --color-border-default: var(--color-palette-neutral-5);
  --color-border-subtle: var(--color-palette-neutral-3);
  --color-border-separator: var(--color-border-subtle);
  --color-border-control: var(--color-border-default);
  --color-border-strong: var(--color-border-2);
  --color-border-track: var(--color-palette-neutral-6);
  --color-border-brand: var(--color-brand-primary);
  --color-border-success: var(--color-palette-success-a7);
  --color-border-warning: var(--color-palette-warning-a7);
  --color-border-error: var(--color-palette-error-a7);
  --color-border-info: var(--color-palette-info-a7);
  --color-surface-base: var(--color-palette-neutral-1);
  --color-surface-raised: var(--color-palette-neutral-1);
  --color-icon-1: var(--color-palette-neutral-11);
  --color-icon-2: var(--color-palette-neutral-10);
  --color-icon-3: var(--color-palette-neutral-9);
  --color-icon-muted: var(--color-icon-3);
  --color-icon-disabled: var(--color-icon-3);
  --color-icon-brand: var(--color-brand-primary);
  --color-icon-success: var(--color-palette-success-11);
  --color-icon-warning: var(--color-palette-warning-11);
  --color-icon-error: var(--color-palette-error-11);
  --color-icon-info: var(--color-palette-info-11);
  --color-interactive-default: var(--color-brand-primary);
  --color-interactive-hover: var(--color-brand-primaryHover);
  --color-interactive-active: var(--color-brand-primaryActive);
  --color-interactive-focus: var(--color-brand-primary);
  --color-interactive-disabled: var(--color-palette-neutral-7);
  --color-interactive-visited: var(--color-brand-primaryActive);
  --color-palette-thepia-1: #fcfcfe;
  --color-palette-thepia-2: #f9f9fe;
  --color-palette-thepia-3: #f3f1fc;
  --color-palette-thepia-4: #eae6fd;
  --color-palette-thepia-5: #e0dafb;
  --color-palette-thepia-6: #d4ccf5;
  --color-palette-thepia-7: #c2b8ea;
  --color-palette-thepia-8: #aa9cdd;
  --color-palette-thepia-9: #988aca;
  --color-palette-thepia-10: #8c7ebd;
  --color-palette-thepia-11: #685a96;
  --color-palette-thepia-12: #342854;
  --color-palette-thepia-50: #F5F3FC;
  --color-palette-thepia-100: #EBE7F8;
  --color-palette-thepia-200: #D7CFF1;
  --color-palette-thepia-300: #C3B7EA;
  --color-palette-thepia-400: #988ACA;
  --color-palette-thepia-500: #7B6BB7;
  --color-palette-thepia-600: #654CA3;
  --color-palette-thepia-700: #533E89;
  --color-palette-thepia-800: #41316F;
  --color-palette-thepia-900: #2F2455;
  --color-palette-thepia-950: #1F1838;
  --color-palette-thepia-a1: #0000aa03;
  --color-palette-thepia-a2: #0000d506;
  --color-palette-thepia-a3: #2500c90e;
  --color-palette-thepia-a4: #2900eb19;
  --color-palette-thepia-a5: #2a00e425;
  --color-palette-thepia-a6: #2800cd33;
  --color-palette-thepia-a7: #2400b447;
  --color-palette-thepia-a8: #2500a863;
  --color-palette-thepia-a9: #1f008c75;
  --color-palette-thepia-a10: #1c007d81;
  --color-palette-thepia-a11: #16005da5;
  --color-palette-thepia-a12: #0e0034d7;
  --color-palette-thepia-contrast: #fff;
  --color-palette-thepia-surface: #f8f8fecc;
  --color-palette-thepia-indicator: #988aca;
  --color-palette-thepia-track: #988aca;
  --color-palette-neutral-1: #fcfcfd;
  --color-palette-neutral-2: #f9f9fb;
  --color-palette-neutral-3: #eff0f3;
  --color-palette-neutral-4: #e7e8ec;
  --color-palette-neutral-5: #e0e1e6;
  --color-palette-neutral-6: #d8d9e0;
  --color-palette-neutral-7: #cdced7;
  --color-palette-neutral-8: #b9bbc6;
  --color-palette-neutral-9: #8b8d98;
  --color-palette-neutral-10: #80828d;
  --color-palette-neutral-11: #62636c;
  --color-palette-neutral-12: #1e1f24;
  --color-palette-neutral-50: #fafafa;
  --color-palette-neutral-100: #f4f4f5;
  --color-palette-neutral-200: #e4e4e7;
  --color-palette-neutral-300: #d4d4d8;
  --color-palette-neutral-400: #a1a1aa;
  --color-palette-neutral-500: #71717a;
  --color-palette-neutral-600: #52525b;
  --color-palette-neutral-700: #3f3f46;
  --color-palette-neutral-800: #27272a;
  --color-palette-neutral-900: #18181b;
  --color-palette-neutral-a1: #00005503;
  --color-palette-neutral-a2: #00005506;
  --color-palette-neutral-a3: #00104010;
  --color-palette-neutral-a4: #000b3618;
  --color-palette-neutral-a5: #0009321f;
  --color-palette-neutral-a6: #00073527;
  --color-palette-neutral-a7: #00063332;
  --color-palette-neutral-a8: #00083046;
  --color-palette-neutral-a9: #00051d74;
  --color-palette-neutral-a10: #00051b7f;
  --color-palette-neutral-a11: #0002119d;
  --color-palette-neutral-a12: #000107e1;
  --color-palette-neutral-contrast: #FFFFFF;
  --color-palette-neutral-surface: #ffffffcc;
  --color-palette-neutral-indicator: #8b8d98;
  --color-palette-neutral-track: #8b8d98;
  --color-palette-neutral-background: var(--color-palette-neutral-1);
  --color-palette-neutral-gray: var(--color-palette-neutral-indicator);
  --color-palette-success-1: #F9FEFA;
  --color-palette-success-2: #F3FCF4;
  --color-palette-success-3: #E3F9E6;
  --color-palette-success-4: #D1F4D6;
  --color-palette-success-5: #BAEEC3;
  --color-palette-success-6: #9EE4AB;
  --color-palette-success-7: #76D68B;
  --color-palette-success-8: #1EC35C;
  --color-palette-success-9: #22C55E;
  --color-palette-success-10: #00B953;
  --color-palette-success-11: #008527;
  --color-palette-success-12: #0E3F1D;
  --color-palette-success-50: #f0fdf4;
  --color-palette-success-500: #22c55e;
  --color-palette-success-600: #15803d;
  --color-palette-success-a1: #F8FFF9AA;
  --color-palette-success-a2: #17FC180A;
  --color-palette-success-a3: #07DF1C1A;
  --color-palette-success-a4: #02CD1B2C;
  --color-palette-success-a5: #01C72043;
  --color-palette-success-a6: #03BD2360;
  --color-palette-success-a7: #00B42888;
  --color-palette-success-a8: #00BB46E1;
  --color-palette-success-a9: #00BC45DD;
  --color-palette-success-a10: #00B953;
  --color-palette-success-a11: #008527;
  --color-palette-success-a12: #003410F1;
  --color-palette-success-contrast: #FFF;
  --color-palette-success-surface: #F1FDF1CC;
  --color-palette-success-indicator: #22C55E;
  --color-palette-success-track: #22C55E;
  --color-palette-warning-1: #FEFCFA;
  --color-palette-warning-2: #FFF7E7;
  --color-palette-warning-3: #FFEFCD;
  --color-palette-warning-4: #FFE4B7;
  --color-palette-warning-5: #FFD99D;
  --color-palette-warning-6: #FFC877;
  --color-palette-warning-7: #FFB453;
  --color-palette-warning-8: #F19A00;
  --color-palette-warning-9: #F59E0B;
  --color-palette-warning-10: #E99300;
  --color-palette-warning-11: #AC6500;
  --color-palette-warning-12: #4F3515;
  --color-palette-warning-50: #fffbeb;
  --color-palette-warning-500: #f59e0b;
  --color-palette-warning-600: #d97706;
  --color-palette-warning-a1: #FFFCF9AA;
  --color-palette-warning-a2: #FFF7E7;
  --color-palette-warning-a3: #FFEFCD;
  --color-palette-warning-a4: #FFE4B7;
  --color-palette-warning-a5: #FFD99D;
  --color-palette-warning-a6: #FFC877;
  --color-palette-warning-a7: #FFB453;
  --color-palette-warning-a8: #F19A00;
  --color-palette-warning-a9: #F59A00F4;
  --color-palette-warning-a10: #E99300;
  --color-palette-warning-a11: #AC6500;
  --color-palette-warning-a12: #3F2300EA;
  --color-palette-warning-contrast: #FFF;
  --color-palette-warning-surface: #FFF6E2CC;
  --color-palette-warning-indicator: #F59E0B;
  --color-palette-warning-track: #F59E0B;
  --color-palette-error-1: #FFFCFB;
  --color-palette-error-2: #FFF7F6;
  --color-palette-error-3: #FFEBE9;
  --color-palette-error-4: #FFDBD6;
  --color-palette-error-5: #FFCCC6;
  --color-palette-error-6: #FFBCB5;
  --color-palette-error-7: #F8A8A0;
  --color-palette-error-8: #F08C84;
  --color-palette-error-9: #EF4444;
  --color-palette-error-10: #E13237;
  --color-palette-error-11: #D3232C;
  --color-palette-error-12: #661717;
  --color-palette-error-50: #fef2f2;
  --color-palette-error-500: #ef4444;
  --color-palette-error-600: #dc2626;
  --color-palette-error-a1: #FFFCFB;
  --color-palette-error-a2: #FFF7F6;
  --color-palette-error-a3: #FFEBE9;
  --color-palette-error-a4: #FFDBD6;
  --color-palette-error-a5: #FFCCC6;
  --color-palette-error-a6: #FFBCB5;
  --color-palette-error-a7: #F219015E;
  --color-palette-error-a8: #E312017A;
  --color-palette-error-a9: #EB0201BB;
  --color-palette-error-a10: #DB0106CD;
  --color-palette-error-a11: #CC000BDC;
  --color-palette-error-a12: #570000E8;
  --color-palette-error-contrast: #FFF;
  --color-palette-error-surface: #FFF6F5CC;
  --color-palette-error-indicator: #EF4444;
  --color-palette-error-track: #EF4444;
  --color-palette-info-1: #FBFCFF;
  --color-palette-info-2: #F5F9FF;
  --color-palette-info-3: #EAF2FF;
  --color-palette-info-4: #DCEBFF;
  --color-palette-info-5: #CBE1FF;
  --color-palette-info-6: #B8D4FF;
  --color-palette-info-7: #9FC2FB;
  --color-palette-info-8: #7BAAF6;
  --color-palette-info-9: #3B82F6;
  --color-palette-info-10: #2C74E9;
  --color-palette-info-11: #256CDE;
  --color-palette-info-12: #123164;
  --color-palette-info-50: #eff6ff;
  --color-palette-info-500: #3b82f6;
  --color-palette-info-600: #2563eb;
  --color-palette-info-a1: #FBFCFF;
  --color-palette-info-a2: #F5F9FF;
  --color-palette-info-a3: #EAF2FF;
  --color-palette-info-a4: #DCEBFF;
  --color-palette-info-a5: #CBE1FF;
  --color-palette-info-a6: #B8D4FF;
  --color-palette-info-a7: #0361F85F;
  --color-palette-info-a8: #005CF083;
  --color-palette-info-a9: #015EF3C4;
  --color-palette-info-a10: #0158E5D3;
  --color-palette-info-a11: #0053D8DA;
  --color-palette-info-a12: #002158ED;
  --color-palette-info-contrast: #FFF;
  --color-palette-info-surface: #F4F9FFCC;
  --color-palette-info-indicator: #3B82F6;
  --color-palette-info-track: #3B82F6;
  --color-brand-primary: var(--color-palette-thepia-400);
  --color-brand-primaryHover: var(--color-palette-thepia-500);
  --color-brand-primaryActive: var(--color-palette-thepia-600);
  --color-brand-primarySubtle: var(--color-palette-thepia-50);
  --color-brand-primaryMuted: var(--color-palette-thepia-100);
  --color-action-primary-bg: var(--color-brand-primary);
  --color-action-primary-bg-hover: var(--color-brand-primaryHover);
  --color-action-primary-bg-active: var(--color-brand-primaryActive);
  --color-action-secondary-bg: var(--color-palette-neutral-a3);
  --color-action-secondary-bg-hover: var(--color-palette-neutral-a4);
  --color-action-secondary-bg-active: var(--color-palette-neutral-a5);
  --color-action-secondary-border: var(--color-border-2);
  --color-action-secondary-text: var(--color-text-1);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --color-palette-thepia-1: oklch(99.2% 0.0022 293.7);
      --color-palette-thepia-2: oklch(98.3% 0.0071 293.7);
      --color-palette-thepia-3: oklch(96.3% 0.015 293.7);
      --color-palette-thepia-4: oklch(93.4% 0.031 293.7);
      --color-palette-thepia-5: oklch(90.4% 0.0451 293.7);
      --color-palette-thepia-6: oklch(86.4% 0.0574 293.7);
      --color-palette-thepia-7: oklch(80.6% 0.0716 293.7);
      --color-palette-thepia-8: oklch(72.9% 0.0943 293.7);
      --color-palette-thepia-9: oklch(67% 0.0943 293.7);
      --color-palette-thepia-10: oklch(63.1% 0.0943 293.7);
      --color-palette-thepia-11: oklch(50.8% 0.0943 293.7);
      --color-palette-thepia-12: oklch(31.3% 0.0774 293.7);
      --color-palette-thepia-a1: color(display-p3 0.0235 0.0235 0.6745 / 0.012);
      --color-palette-thepia-a2: color(display-p3 0.0235 0.0235 0.8392 / 0.024);
      --color-palette-thepia-a3: color(display-p3 0.1451 0.0039 0.7176 / 0.055);
      --color-palette-thepia-a4: color(display-p3 0.1294 0.0118 0.8431 / 0.099);
      --color-palette-thepia-a5: color(display-p3 0.1412 0.0078 0.8157 / 0.146);
      --color-palette-thepia-a6: color(display-p3 0.1373 0 0.7451 / 0.2);
      --color-palette-thepia-a7: color(display-p3 0.1176 0.0039 0.651 / 0.279);
      --color-palette-thepia-a8: color(display-p3 0.1255 0.0039 0.6078 / 0.389);
      --color-palette-thepia-a9: color(display-p3 0.1059 0.0039 0.5137 / 0.459);
      --color-palette-thepia-a10: color(display-p3 0.0941 0 0.4588 / 0.506);
      --color-palette-thepia-a11: color(display-p3 0.0667 0 0.3373 / 0.644);
      --color-palette-thepia-a12: color(display-p3 0.0471 0 0.1922 / 0.844);
      --color-palette-thepia-surface: color(display-p3 0.9725 0.9725 0.9922 / 0.8);
      --color-palette-thepia-indicator: oklch(67% 0.0943 293.7);
      --color-palette-thepia-track: oklch(67% 0.0943 293.7);
      --color-palette-neutral-1: oklch(99.1% 0.0015 277.7);
      --color-palette-neutral-2: oklch(98.2% 0.003 277.7);
      --color-palette-neutral-3: oklch(95.6% 0.0045 277.7);
      --color-palette-neutral-4: oklch(93.1% 0.0061 277.7);
      --color-palette-neutral-5: oklch(91% 0.0077 277.7);
      --color-palette-neutral-6: oklch(88.8% 0.0093 277.7);
      --color-palette-neutral-7: oklch(85.3% 0.0117 277.7);
      --color-palette-neutral-8: oklch(79.4% 0.016 277.7);
      --color-palette-neutral-9: oklch(64.6% 0.0165 277.7);
      --color-palette-neutral-10: oklch(61% 0.0161 277.7);
      --color-palette-neutral-11: oklch(50.3% 0.0139 277.7);
      --color-palette-neutral-12: oklch(24.1% 0.0099 277.7);
      --color-palette-neutral-a1: color(display-p3 0.0235 0.0235 0.349 / 0.012);
      --color-palette-neutral-a2: color(display-p3 0.0235 0.0235 0.349 / 0.024);
      --color-palette-neutral-a3: color(display-p3 0.0078 0.0667 0.2549 / 0.063);
      --color-palette-neutral-a4: color(display-p3 0.0118 0.051 0.2157 / 0.095);
      --color-palette-neutral-a5: color(display-p3 0.0039 0.0392 0.2 / 0.122);
      --color-palette-neutral-a6: color(display-p3 0.0039 0.0275 0.1804 / 0.153);
      --color-palette-neutral-a7: color(display-p3 0.0078 0.0275 0.1843 / 0.197);
      --color-palette-neutral-a8: color(display-p3 0.0039 0.0314 0.1765 / 0.275);
      --color-palette-neutral-a9: color(display-p3 0.0039 0.0196 0.1059 / 0.455);
      --color-palette-neutral-a10: color(display-p3 0.0039 0.0196 0.098 / 0.499);
      --color-palette-neutral-a11: color(display-p3 0 0.0078 0.0588 / 0.616);
      --color-palette-neutral-a12: color(display-p3 0 0.0039 0.0275 / 0.883);
      --color-palette-neutral-surface: color(display-p3 1 1 1 / 80%);
      --color-palette-neutral-indicator: oklch(64.6% 0.0165 277.7);
      --color-palette-neutral-track: oklch(64.6% 0.0165 277.7);
      --color-palette-success-1: oklch(99.2% 0.0079 149.6);
      --color-palette-success-2: oklch(98.1% 0.0136 149.6);
      --color-palette-success-3: oklch(96% 0.0342 149.6);
      --color-palette-success-4: oklch(93.4% 0.0546 149.6);
      --color-palette-success-5: oklch(90.1% 0.0781 149.6);
      --color-palette-success-6: oklch(85.8% 0.1054 149.6);
      --color-palette-success-7: oklch(79.8% 0.1403 149.6);
      --color-palette-success-8: oklch(71.6% 0.192 149.6);
      --color-palette-success-9: oklch(72.3% 0.192 149.6);
      --color-palette-success-10: oklch(68.6% 0.192 149.6);
      --color-palette-success-11: oklch(52.7% 0.1914 149.6);
      --color-palette-success-12: oklch(32.7% 0.079 149.6);
      --color-palette-success-a1: color(display-p3 0.9804 1 0.9765 / 0.667);
      --color-palette-success-a2: color(display-p3 0.1333 0.9922 0.0157 / 0.032);
      --color-palette-success-a3: color(display-p3 0.0431 0.8118 0.0039 / 0.087);
      --color-palette-success-a4: color(display-p3 0.0314 0.749 0.0078 / 0.147);
      --color-palette-success-a5: color(display-p3 0.0039 0.7216 0.0078 / 0.219);
      --color-palette-success-a6: color(display-p3 0.0039 0.6667 0.0275 / 0.314);
      --color-palette-success-a7: color(display-p3 0.0039 0.6353 0.0431 / 0.441);
      --color-palette-success-a8: color(display-p3 0 0.6196 0.0745 / 0.635);
      --color-palette-success-a9: color(display-p3 0 0.6275 0.0667 / 0.627);
      --color-palette-success-a10: color(display-p3 0 0.5804 0.0706 / 0.671);
      --color-palette-success-a11: color(display-p3 0.0235 0.3882 0 / 0.791);
      --color-palette-success-a12: color(display-p3 0 0.1451 0.0196 / 0.885);
      --color-palette-success-surface: color(display-p3 0.9529 0.9843 0.9451 / 0.8);
      --color-palette-success-indicator: oklch(72.3% 0.192 149.6);
      --color-palette-success-track: oklch(72.3% 0.192 149.6);
      --color-palette-warning-1: oklch(99.2% 0.0032 70.08);
      --color-palette-warning-2: oklch(98.5% 0.0275 70.08);
      --color-palette-warning-3: oklch(96.8% 0.078 70.08);
      --color-palette-warning-4: oklch(94.3% 0.1206 70.08);
      --color-palette-warning-5: oklch(91.6% 0.1543 70.08);
      --color-palette-warning-6: oklch(87.9% 0.144 70.08);
      --color-palette-warning-7: oklch(82.6% 0.1425 70.08);
      --color-palette-warning-8: oklch(75.7% 0.1647 70.08);
      --color-palette-warning-9: oklch(76.9% 0.1647 70.08);
      --color-palette-warning-10: oklch(73.4% 0.1647 70.08);
      --color-palette-warning-11: oklch(57.1% 0.1647 70.08);
      --color-palette-warning-12: oklch(35.2% 0.0591 70.08);
      --color-palette-warning-a1: color(display-p3 1 0.9882 0.9765 / 0.667);
      --color-palette-warning-a2: color(display-p3 1 0.9608 0.8784 / 0.667);
      --color-palette-warning-a3: color(display-p3 0.9882 0.7216 0.0039 / 0.174);
      --color-palette-warning-a4: color(display-p3 0.9608 0.6392 0.0039 / 0.257);
      --color-palette-warning-a5: color(display-p3 0.9569 0.6078 0.0039 / 0.348);
      --color-palette-warning-a6: color(display-p3 0.9412 0.5843 0.0039 / 0.483);
      --color-palette-warning-a7: color(display-p3 0.9333 0.5373 0 / 0.601);
      --color-palette-warning-a8: color(display-p3 0.8706 0.5176 0 / 0.783);
      --color-palette-warning-a9: color(display-p3 0.8902 0.5255 0 / 0.767);
      --color-palette-warning-a10: color(display-p3 0.8353 0.4863 0 / 0.791);
      --color-palette-warning-a11: color(display-p3 0.5765 0.3137 0 / 0.862);
      --color-palette-warning-a12: color(display-p3 0.2118 0.1176 0 / 0.894);
      --color-palette-warning-surface: color(display-p3 1 0.9725 0.8941 / 0.8);
      --color-palette-warning-indicator: oklch(76.9% 0.1647 70.08);
      --color-palette-warning-track: oklch(76.9% 0.1647 70.08);
      --color-palette-error-1: oklch(99.2% 0.0033 25.33);
      --color-palette-error-2: oklch(98.3% 0.0087 25.33);
      --color-palette-error-3: oklch(95.5% 0.0226 25.33);
      --color-palette-error-4: oklch(92.8% 0.0506 25.33);
      --color-palette-error-5: oklch(89.5% 0.0665 25.33);
      --color-palette-error-6: oklch(85.6% 0.0803 25.33);
      --color-palette-error-7: oklch(80.7% 0.0966 25.33);
      --color-palette-error-8: oklch(74.4% 0.1223 25.33);
      --color-palette-error-9: oklch(63.7% 0.2078 25.33);
      --color-palette-error-10: oklch(59.6% 0.2098 25.33);
      --color-palette-error-11: oklch(55.9% 0.2078 25.33);
      --color-palette-error-12: oklch(34% 0.1123 25.33);
      --color-palette-error-a1: color(display-p3 1 0.9882 0.9843 / 0.667);
      --color-palette-error-a2: color(display-p3 1 0.9608 0.9529 / 0.667);
      --color-palette-error-a3: color(display-p3 0.9882 0.1647 0.0118 / 0.076);
      --color-palette-error-a4: color(display-p3 0.9137 0.1608 0.0078 / 0.151);
      --color-palette-error-a5: color(display-p3 0.898 0.1294 0.0039 / 0.21);
      --color-palette-error-a6: color(display-p3 0.8902 0.1255 0.0039 / 0.277);
      --color-palette-error-a7: color(display-p3 0.8157 0.098 0.0039 / 0.356);
      --color-palette-error-a8: color(display-p3 0.7725 0.0902 0.0039 / 0.467);
      --color-palette-error-a9: color(display-p3 0.8118 0.0353 0 / 0.7);
      --color-palette-error-a10: color(display-p3 0.7529 0.0196 0 / 0.751);
      --color-palette-error-a11: color(display-p3 0.698 0.0118 0 / 0.791);
      --color-palette-error-a12: color(display-p3 0.2941 0.0118 0 / 0.894);
      --color-palette-error-surface: color(display-p3 1 0.9725 0.9647 / 0.8);
      --color-palette-error-indicator: oklch(63.7% 0.2078 25.33);
      --color-palette-error-track: oklch(63.7% 0.2078 25.33);
      --color-palette-info-1: oklch(99.2% 0.0032 259.8);
      --color-palette-info-2: oklch(98.1% 0.0096 259.8);
      --color-palette-info-3: oklch(96% 0.0199 259.8);
      --color-palette-info-4: oklch(93.7% 0.0373 259.8);
      --color-palette-info-5: oklch(90.6% 0.054 259.8);
      --color-palette-info-6: oklch(86.4% 0.0697 259.8);
      --color-palette-info-7: oklch(80.9% 0.0894 259.8);
      --color-palette-info-8: oklch(73.4% 0.1221 259.8);
      --color-palette-info-9: oklch(62.3% 0.188 259.8);
      --color-palette-info-10: oklch(58.2% 0.1913 259.8);
      --color-palette-info-11: oklch(55.4% 0.188 259.8);
      --color-palette-info-12: oklch(32.3% 0.0976 259.8);
      --color-palette-info-a1: color(display-p3 0.9843 0.9882 1);
      --color-palette-info-a2: color(display-p3 0.9412 0.9647 0.9961 / 0.5);
      --color-palette-info-a3: color(display-p3 0.8549 0.9098 0.9961 / 0.5);
      --color-palette-info-a4: color(display-p3 0.0078 0.4157 0.9922 / 0.116);
      --color-palette-info-a5: color(display-p3 0.0039 0.3765 0.9725 / 0.179);
      --color-palette-info-a6: color(display-p3 0 0.3451 0.9608 / 0.25);
      --color-palette-info-a7: color(display-p3 0.0039 0.3137 0.9137 / 0.342);
      --color-palette-info-a8: color(display-p3 0.0039 0.302 0.8863 / 0.473);
      --color-palette-info-a9: color(display-p3 0 0.2863 0.9098 / 0.691);
      --color-palette-info-a10: color(display-p3 0 0.2627 0.8471 / 0.747);
      --color-palette-info-a11: color(display-p3 0 0.251 0.8 / 0.77);
      --color-palette-info-a12: color(display-p3 0 0.098 0.3098 / 0.897);
      --color-palette-info-surface: color(display-p3 0.9608 0.9765 1 / 0.8);
      --color-palette-info-indicator: oklch(62.3% 0.188 259.8);
      --color-palette-info-track: oklch(62.3% 0.188 259.8);
    }
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-palette-neutral-1: #111113;
    --color-palette-neutral-2: #19191b;
    --color-palette-neutral-3: #222325;
    --color-palette-neutral-4: #292a2e;
    --color-palette-neutral-5: #303136;
    --color-palette-neutral-6: #393a40;
    --color-palette-neutral-7: #46484f;
    --color-palette-neutral-8: #5f606a;
    --color-palette-neutral-9: #6c6e79;
    --color-palette-neutral-10: #797b86;
    --color-palette-neutral-11: #b2b3bd;
    --color-palette-neutral-12: #eeeef0;
    --color-palette-neutral-a1: #1111bb03;
    --color-palette-neutral-a2: #cbcbf90b;
    --color-palette-neutral-a3: #d6e2f916;
    --color-palette-neutral-a4: #d1d9f920;
    --color-palette-neutral-a5: #d7ddfd28;
    --color-palette-neutral-a6: #d9defc33;
    --color-palette-neutral-a7: #dae2fd43;
    --color-palette-neutral-a8: #e0e3fd60;
    --color-palette-neutral-a9: #e0e4fd70;
    --color-palette-neutral-a10: #e3e7fd7e;
    --color-palette-neutral-a11: #eff0feb9;
    --color-palette-neutral-a12: #fdfdffef;
    --color-palette-neutral-surface: rgba(0, 0, 0, 0.05);
    --color-palette-neutral-indicator: #6c6e79;
    --color-palette-neutral-track: #6c6e79;
    --color-palette-neutral-background: var(--color-palette-neutral-dark-1);
    --color-palette-thepia-1: #111016;
    --color-palette-thepia-2: #18161f;
    --color-palette-thepia-3: #272337;
    --color-palette-thepia-4: #332c4a;
    --color-palette-thepia-5: #3d3556;
    --color-palette-thepia-6: #484063;
    --color-palette-thepia-7: #564d74;
    --color-palette-thepia-8: #695e8d;
    --color-palette-thepia-11: #b8aee2;
    --color-palette-thepia-12: #e3e0f1;
    --color-palette-thepia-a1: #1200e606;
    --color-palette-thepia-a2: #8866ff0f;
    --color-palette-thepia-a3: #9a81fe29;
    --color-palette-thepia-a4: #9d81fc3e;
    --color-palette-thepia-a5: #a98eff4a;
    --color-palette-thepia-a6: #b19aff58;
    --color-palette-thepia-a7: #b6a0fd6b;
    --color-palette-thepia-a8: #baa5ff85;
    --color-palette-thepia-a9: #beacfec7;
    --color-palette-thepia-a10: #baa7feb9;
    --color-palette-thepia-a11: #cfc4ffe0;
    --color-palette-thepia-a12: #f0edfff0;
    --color-palette-thepia-surface: #1f1b2d80;
    --color-palette-success-1: #0C140D;
    --color-palette-success-2: #101911;
    --color-palette-success-3: #122917;
    --color-palette-success-4: #0D391A;
    --color-palette-success-5: #114721;
    --color-palette-success-6: #16562A;
    --color-palette-success-7: #1A6632;
    --color-palette-success-8: #1B793A;
    --color-palette-success-11: #39D36B;
    --color-palette-success-12: #AEF5BB;
    --color-palette-success-a1: #00D10004;
    --color-palette-success-a2: #00F40009;
    --color-palette-success-a3: #1BFD3B1A;
    --color-palette-success-a4: #00FF3D2B;
    --color-palette-success-a5: #11FF513A;
    --color-palette-success-a6: #23FF634A;
    --color-palette-success-a7: #2AFD695C;
    --color-palette-success-a8: #27FD6C70;
    --color-palette-success-a9: #28FF76C1;
    --color-palette-success-a10: #00FF6DB4;
    --color-palette-success-a11: #42FF7ED0;
    --color-palette-success-a12: #B4FEC2F5;
    --color-palette-success-surface: #10211080;
    --color-palette-warning-1: #14110C;
    --color-palette-warning-2: #1B150E;
    --color-palette-warning-3: #2D1E0B;
    --color-palette-warning-4: #3F2300;
    --color-palette-warning-5: #4C2C00;
    --color-palette-warning-6: #5A390B;
    --color-palette-warning-7: #6F4A1A;
    --color-palette-warning-8: #8F6022;
    --color-palette-warning-11: #F7AD4C;
    --color-palette-warning-12: #FDE2C4;
    --color-palette-warning-a1: #D1110004;
    --color-palette-warning-a2: #F96E000B;
    --color-palette-warning-a3: #FF80001E;
    --color-palette-warning-a4: #FC6D0032;
    --color-palette-warning-a5: #FD7D0040;
    --color-palette-warning-a6: #FD92004F;
    --color-palette-warning-a7: #FFA12565;
    --color-palette-warning-a8: #FFA73087;
    --color-palette-warning-a9: #FEA30BF5;
    --color-palette-warning-a10: #FE9F00E8;
    --color-palette-warning-a11: #FEB24DF7;
    --color-palette-warning-a12: #FFE4C6FD;
    --color-palette-warning-surface: #25190A80;
    --color-palette-error-1: #170F0E;
    --color-palette-error-2: #1E1110;
    --color-palette-error-3: #390F0E;
    --color-palette-error-4: #4F080B;
    --color-palette-error-5: #5F0F11;
    --color-palette-error-6: #711D1C;
    --color-palette-error-7: #8A2D2B;
    --color-palette-error-8: #B33D3A;
    --color-palette-error-10: #E03438;
    --color-palette-error-11: #FF877E;
    --color-palette-error-12: #FFD1CC;
    --color-palette-error-a1: #EC000007;
    --color-palette-error-a2: #FE12000E;
    --color-palette-error-a3: #FF06002B;
    --color-palette-error-a4: #FD000043;
    --color-palette-error-a5: #FE0B0D54;
    --color-palette-error-a6: #FF2F2A67;
    --color-palette-error-a7: #FF484382;
    --color-palette-error-a8: #FF524CAE;
    --color-palette-error-a9: #FF4848EE;
    --color-palette-error-a10: #FF3A3EDE;
    --color-palette-error-a11: #FF877E;
    --color-palette-error-a12: #FFD1CC;
    --color-palette-error-surface: #2B110E80;
    --color-palette-info-1: #0B111C;
    --color-palette-info-2: #0D1522;
    --color-palette-info-3: #0F2243;
    --color-palette-info-4: #0D2B5C;
    --color-palette-info-5: #15376E;
    --color-palette-info-6: #1F437F;
    --color-palette-info-7: #295294;
    --color-palette-info-8: #3262B0;
    --color-palette-info-10: #2E75E8;
    --color-palette-info-11: #7EAEFD;
    --color-palette-info-12: #D0E2FF;
    --color-palette-info-a1: #0012F90A;
    --color-palette-info-a2: #004DF411;
    --color-palette-info-a3: #0864FF34;
    --color-palette-info-a4: #0565FF4F;
    --color-palette-info-a5: #1C73FD63;
    --color-palette-info-a6: #307EFF75;
    --color-palette-info-a7: #3D87FE8C;
    --color-palette-info-a8: #428AFFAA;
    --color-palette-info-a9: #3C86FEF6;
    --color-palette-info-a10: #317FFEE7;
    --color-palette-info-a11: #7FAFFFFD;
    --color-palette-info-a12: #D0E2FF;
    --color-palette-info-surface: #0A193180;
    --color-text-1: var(--color-palette-neutral-12);
    --color-text-2: var(--color-palette-neutral-11);
    --color-text-3: var(--color-palette-neutral-10);
    --color-text-4: var(--color-palette-neutral-9);
    --color-text-primary: var(--color-text-1);
    --color-text-secondary: var(--color-text-2);
    --color-text-success: var(--color-palette-success-11);
    --color-text-warning: var(--color-palette-warning-11);
    --color-text-error: var(--color-palette-error-11);
    --color-text-info: var(--color-palette-info-11);
    --color-text-placeholder: var(--color-palette-neutral-9);
    --color-bg-1: var(--color-palette-neutral-1);
    --color-bg-2: var(--color-palette-neutral-3);
    --color-bg-3: var(--color-palette-neutral-5);
    --color-bg-primary: var(--color-palette-neutral-1);
    --color-bg-success: var(--color-palette-success-a3);
    --color-bg-warning: var(--color-palette-warning-a3);
    --color-bg-error: var(--color-palette-error-a3);
    --color-bg-info: var(--color-palette-info-a3);
    --color-bg-secondary: var(--color-palette-neutral-3);
    --color-bg-muted: var(--color-palette-neutral-2);
    --color-bg-primary-hover: var(--color-palette-neutral-3);
    --color-bg-secondary-hover: var(--color-palette-neutral-5);
    --color-bg-disabled-input: var(--color-palette-neutral-3);
    --color-bg-disabled-primary: var(--color-palette-neutral-5);
    --color-bg-disabled-secondary: var(--color-palette-neutral-3);
    --color-disabled-text: var(--color-palette-neutral-9);
    --color-border-1: var(--color-palette-neutral-5);
    --color-border-2: var(--color-palette-neutral-7);
    --color-border-3: var(--color-palette-neutral-9);
    --color-border-default: var(--color-palette-neutral-5);
    --color-border-subtle: var(--color-palette-neutral-3);
    --color-border-separator: var(--color-border-subtle);
    --color-border-control: var(--color-border-default);
    --color-border-strong: var(--color-border-2);
    --color-border-track: var(--color-palette-neutral-6);
    --color-border-success: var(--color-palette-success-a7);
    --color-border-warning: var(--color-palette-warning-a7);
    --color-border-error: var(--color-palette-error-a7);
    --color-border-info: var(--color-palette-info-a7);
    --color-surface-base: var(--color-palette-neutral-1);
    --color-surface-raised: var(--color-palette-neutral-1);
    --color-icon-1: var(--color-palette-neutral-11);
    --color-icon-2: var(--color-palette-neutral-10);
    --color-icon-3: var(--color-palette-neutral-9);
    --color-icon-muted: var(--color-icon-3);
    --color-icon-disabled: var(--color-icon-3);
    --color-icon-success: var(--color-palette-success-11);
    --color-icon-warning: var(--color-palette-warning-11);
    --color-icon-error: var(--color-palette-error-11);
    --color-icon-info: var(--color-palette-info-11);
    --color-interactive-disabled: var(--color-palette-neutral-7);
    --color-action-secondary-bg: var(--color-palette-neutral-a3);
    --color-action-secondary-bg-hover: var(--color-palette-neutral-a4);
    --color-action-secondary-bg-active: var(--color-palette-neutral-a5);
    --color-action-secondary-border: var(--color-border-2);
    --color-action-secondary-text: var(--color-text-1);
  }
}

.dark, .dark-theme, [data-theme="dark"] {
  --color-palette-neutral-1: #111113;
  --color-palette-neutral-2: #19191b;
  --color-palette-neutral-3: #222325;
  --color-palette-neutral-4: #292a2e;
  --color-palette-neutral-5: #303136;
  --color-palette-neutral-6: #393a40;
  --color-palette-neutral-7: #46484f;
  --color-palette-neutral-8: #5f606a;
  --color-palette-neutral-9: #6c6e79;
  --color-palette-neutral-10: #797b86;
  --color-palette-neutral-11: #b2b3bd;
  --color-palette-neutral-12: #eeeef0;
  --color-palette-neutral-a1: #1111bb03;
  --color-palette-neutral-a2: #cbcbf90b;
  --color-palette-neutral-a3: #d6e2f916;
  --color-palette-neutral-a4: #d1d9f920;
  --color-palette-neutral-a5: #d7ddfd28;
  --color-palette-neutral-a6: #d9defc33;
  --color-palette-neutral-a7: #dae2fd43;
  --color-palette-neutral-a8: #e0e3fd60;
  --color-palette-neutral-a9: #e0e4fd70;
  --color-palette-neutral-a10: #e3e7fd7e;
  --color-palette-neutral-a11: #eff0feb9;
  --color-palette-neutral-a12: #fdfdffef;
  --color-palette-neutral-surface: rgba(0, 0, 0, 0.05);
  --color-palette-neutral-indicator: #6c6e79;
  --color-palette-neutral-track: #6c6e79;
  --color-palette-neutral-background: var(--color-palette-neutral-dark-1);
  --color-palette-thepia-1: #111016;
  --color-palette-thepia-2: #18161f;
  --color-palette-thepia-3: #272337;
  --color-palette-thepia-4: #332c4a;
  --color-palette-thepia-5: #3d3556;
  --color-palette-thepia-6: #484063;
  --color-palette-thepia-7: #564d74;
  --color-palette-thepia-8: #695e8d;
  --color-palette-thepia-11: #b8aee2;
  --color-palette-thepia-12: #e3e0f1;
  --color-palette-thepia-a1: #1200e606;
  --color-palette-thepia-a2: #8866ff0f;
  --color-palette-thepia-a3: #9a81fe29;
  --color-palette-thepia-a4: #9d81fc3e;
  --color-palette-thepia-a5: #a98eff4a;
  --color-palette-thepia-a6: #b19aff58;
  --color-palette-thepia-a7: #b6a0fd6b;
  --color-palette-thepia-a8: #baa5ff85;
  --color-palette-thepia-a9: #beacfec7;
  --color-palette-thepia-a10: #baa7feb9;
  --color-palette-thepia-a11: #cfc4ffe0;
  --color-palette-thepia-a12: #f0edfff0;
  --color-palette-thepia-surface: #1f1b2d80;
  --color-palette-success-1: #0C140D;
  --color-palette-success-2: #101911;
  --color-palette-success-3: #122917;
  --color-palette-success-4: #0D391A;
  --color-palette-success-5: #114721;
  --color-palette-success-6: #16562A;
  --color-palette-success-7: #1A6632;
  --color-palette-success-8: #1B793A;
  --color-palette-success-11: #39D36B;
  --color-palette-success-12: #AEF5BB;
  --color-palette-success-a1: #00D10004;
  --color-palette-success-a2: #00F40009;
  --color-palette-success-a3: #1BFD3B1A;
  --color-palette-success-a4: #00FF3D2B;
  --color-palette-success-a5: #11FF513A;
  --color-palette-success-a6: #23FF634A;
  --color-palette-success-a7: #2AFD695C;
  --color-palette-success-a8: #27FD6C70;
  --color-palette-success-a9: #28FF76C1;
  --color-palette-success-a10: #00FF6DB4;
  --color-palette-success-a11: #42FF7ED0;
  --color-palette-success-a12: #B4FEC2F5;
  --color-palette-success-surface: #10211080;
  --color-palette-warning-1: #14110C;
  --color-palette-warning-2: #1B150E;
  --color-palette-warning-3: #2D1E0B;
  --color-palette-warning-4: #3F2300;
  --color-palette-warning-5: #4C2C00;
  --color-palette-warning-6: #5A390B;
  --color-palette-warning-7: #6F4A1A;
  --color-palette-warning-8: #8F6022;
  --color-palette-warning-11: #F7AD4C;
  --color-palette-warning-12: #FDE2C4;
  --color-palette-warning-a1: #D1110004;
  --color-palette-warning-a2: #F96E000B;
  --color-palette-warning-a3: #FF80001E;
  --color-palette-warning-a4: #FC6D0032;
  --color-palette-warning-a5: #FD7D0040;
  --color-palette-warning-a6: #FD92004F;
  --color-palette-warning-a7: #FFA12565;
  --color-palette-warning-a8: #FFA73087;
  --color-palette-warning-a9: #FEA30BF5;
  --color-palette-warning-a10: #FE9F00E8;
  --color-palette-warning-a11: #FEB24DF7;
  --color-palette-warning-a12: #FFE4C6FD;
  --color-palette-warning-surface: #25190A80;
  --color-palette-error-1: #170F0E;
  --color-palette-error-2: #1E1110;
  --color-palette-error-3: #390F0E;
  --color-palette-error-4: #4F080B;
  --color-palette-error-5: #5F0F11;
  --color-palette-error-6: #711D1C;
  --color-palette-error-7: #8A2D2B;
  --color-palette-error-8: #B33D3A;
  --color-palette-error-10: #E03438;
  --color-palette-error-11: #FF877E;
  --color-palette-error-12: #FFD1CC;
  --color-palette-error-a1: #EC000007;
  --color-palette-error-a2: #FE12000E;
  --color-palette-error-a3: #FF06002B;
  --color-palette-error-a4: #FD000043;
  --color-palette-error-a5: #FE0B0D54;
  --color-palette-error-a6: #FF2F2A67;
  --color-palette-error-a7: #FF484382;
  --color-palette-error-a8: #FF524CAE;
  --color-palette-error-a9: #FF4848EE;
  --color-palette-error-a10: #FF3A3EDE;
  --color-palette-error-a11: #FF877E;
  --color-palette-error-a12: #FFD1CC;
  --color-palette-error-surface: #2B110E80;
  --color-palette-info-1: #0B111C;
  --color-palette-info-2: #0D1522;
  --color-palette-info-3: #0F2243;
  --color-palette-info-4: #0D2B5C;
  --color-palette-info-5: #15376E;
  --color-palette-info-6: #1F437F;
  --color-palette-info-7: #295294;
  --color-palette-info-8: #3262B0;
  --color-palette-info-10: #2E75E8;
  --color-palette-info-11: #7EAEFD;
  --color-palette-info-12: #D0E2FF;
  --color-palette-info-a1: #0012F90A;
  --color-palette-info-a2: #004DF411;
  --color-palette-info-a3: #0864FF34;
  --color-palette-info-a4: #0565FF4F;
  --color-palette-info-a5: #1C73FD63;
  --color-palette-info-a6: #307EFF75;
  --color-palette-info-a7: #3D87FE8C;
  --color-palette-info-a8: #428AFFAA;
  --color-palette-info-a9: #3C86FEF6;
  --color-palette-info-a10: #317FFEE7;
  --color-palette-info-a11: #7FAFFFFD;
  --color-palette-info-a12: #D0E2FF;
  --color-palette-info-surface: #0A193180;
  --color-text-1: var(--color-palette-neutral-12);
  --color-text-2: var(--color-palette-neutral-11);
  --color-text-3: var(--color-palette-neutral-10);
  --color-text-4: var(--color-palette-neutral-9);
  --color-text-primary: var(--color-text-1);
  --color-text-secondary: var(--color-text-2);
  --color-text-success: var(--color-palette-success-11);
  --color-text-warning: var(--color-palette-warning-11);
  --color-text-error: var(--color-palette-error-11);
  --color-text-info: var(--color-palette-info-11);
  --color-text-placeholder: var(--color-palette-neutral-9);
  --color-bg-1: var(--color-palette-neutral-1);
  --color-bg-2: var(--color-palette-neutral-3);
  --color-bg-3: var(--color-palette-neutral-5);
  --color-bg-primary: var(--color-palette-neutral-1);
  --color-bg-success: var(--color-palette-success-a3);
  --color-bg-warning: var(--color-palette-warning-a3);
  --color-bg-error: var(--color-palette-error-a3);
  --color-bg-info: var(--color-palette-info-a3);
  --color-bg-secondary: var(--color-palette-neutral-3);
  --color-bg-muted: var(--color-palette-neutral-2);
  --color-bg-primary-hover: var(--color-palette-neutral-3);
  --color-bg-secondary-hover: var(--color-palette-neutral-5);
  --color-bg-disabled-input: var(--color-palette-neutral-3);
  --color-bg-disabled-primary: var(--color-palette-neutral-5);
  --color-bg-disabled-secondary: var(--color-palette-neutral-3);
  --color-disabled-text: var(--color-palette-neutral-9);
  --color-border-1: var(--color-palette-neutral-5);
  --color-border-2: var(--color-palette-neutral-7);
  --color-border-3: var(--color-palette-neutral-9);
  --color-border-default: var(--color-palette-neutral-5);
  --color-border-subtle: var(--color-palette-neutral-3);
  --color-border-separator: var(--color-border-subtle);
  --color-border-control: var(--color-border-default);
  --color-border-strong: var(--color-border-2);
  --color-border-track: var(--color-palette-neutral-6);
  --color-border-success: var(--color-palette-success-a7);
  --color-border-warning: var(--color-palette-warning-a7);
  --color-border-error: var(--color-palette-error-a7);
  --color-border-info: var(--color-palette-info-a7);
  --color-surface-base: var(--color-palette-neutral-1);
  --color-surface-raised: var(--color-palette-neutral-1);
  --color-icon-1: var(--color-palette-neutral-11);
  --color-icon-2: var(--color-palette-neutral-10);
  --color-icon-3: var(--color-palette-neutral-9);
  --color-icon-muted: var(--color-icon-3);
  --color-icon-disabled: var(--color-icon-3);
  --color-icon-success: var(--color-palette-success-11);
  --color-icon-warning: var(--color-palette-warning-11);
  --color-icon-error: var(--color-palette-error-11);
  --color-icon-info: var(--color-palette-info-11);
  --color-interactive-disabled: var(--color-palette-neutral-7);
  --color-action-secondary-bg: var(--color-palette-neutral-a3);
  --color-action-secondary-bg-hover: var(--color-palette-neutral-a4);
  --color-action-secondary-bg-active: var(--color-palette-neutral-a5);
  --color-action-secondary-border: var(--color-border-2);
  --color-action-secondary-text: var(--color-text-1);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme, [data-theme="dark"] {
      --color-palette-neutral-1: oklch(17.8% 0.0042 277.7);
      --color-palette-neutral-2: oklch(21.5% 0.004 277.7);
      --color-palette-neutral-3: oklch(25.5% 0.0055 277.7);
      --color-palette-neutral-4: oklch(28.4% 0.0075 277.7);
      --color-palette-neutral-5: oklch(31.4% 0.0089 277.7);
      --color-palette-neutral-6: oklch(35% 0.01 277.7);
      --color-palette-neutral-7: oklch(40.2% 0.0121 277.7);
      --color-palette-neutral-8: oklch(49.2% 0.0157 277.7);
      --color-palette-neutral-9: oklch(54% 0.0167 277.7);
      --color-palette-neutral-10: oklch(58.6% 0.0165 277.7);
      --color-palette-neutral-11: oklch(77% 0.0138 277.7);
      --color-palette-neutral-12: oklch(94.9% 0.0026 277.7);
      --color-palette-neutral-a1: color(display-p3 0.0667 0.0667 0.9412 / 0.009);
      --color-palette-neutral-a2: color(display-p3 0.8 0.8 0.9804 / 0.043);
      --color-palette-neutral-a3: color(display-p3 0.851 0.898 0.9882 / 0.085);
      --color-palette-neutral-a4: color(display-p3 0.8392 0.8706 1 / 0.122);
      --color-palette-neutral-a5: color(display-p3 0.8471 0.8745 1 / 0.156);
      --color-palette-neutral-a6: color(display-p3 0.8784 0.898 1 / 0.194);
      --color-palette-neutral-a7: color(display-p3 0.8745 0.9059 0.9961 / 0.257);
      --color-palette-neutral-a8: color(display-p3 0.8941 0.9059 1 / 0.37);
      --color-palette-neutral-a9: color(display-p3 0.8902 0.9098 1 / 0.433);
      --color-palette-neutral-a10: color(display-p3 0.902 0.9176 1 / 0.488);
      --color-palette-neutral-a11: color(display-p3 0.9451 0.949 1 / 0.719);
      --color-palette-neutral-a12: color(display-p3 0.9922 0.9922 1 / 0.937);
      --color-palette-neutral-surface: color(display-p3 0 0 0 / 5%);
      --color-palette-neutral-indicator: oklch(54% 0.0167 277.7);
      --color-palette-neutral-track: oklch(54% 0.0167 277.7);
      --color-palette-thepia-1: oklch(17.8% 0.0132 293.7);
      --color-palette-thepia-2: oklch(20.8% 0.0167 293.7);
      --color-palette-thepia-3: oklch(27.1% 0.0371 293.7);
      --color-palette-thepia-4: oklch(31.5% 0.0535 293.7);
      --color-palette-thepia-5: oklch(35.3% 0.0572 293.7);
      --color-palette-thepia-6: oklch(39.4% 0.0589 293.7);
      --color-palette-thepia-7: oklch(44.6% 0.0637 293.7);
      --color-palette-thepia-8: oklch(51.2% 0.0742 293.7);
      --color-palette-thepia-9: oklch(67% 0.0943 293.7);
      --color-palette-thepia-10: oklch(63.1% 0.0943 293.7);
      --color-palette-thepia-11: oklch(77.7% 0.074 293.7);
      --color-palette-thepia-12: oklch(91.3% 0.0241 293.7);
      --color-palette-thepia-a1: color(display-p3 0.0667 0 0.9608 / 0.022);
      --color-palette-thepia-a2: color(display-p3 0.5686 0.4235 0.9961 / 0.055);
      --color-palette-thepia-a3: color(display-p3 0.5961 0.5216 1 / 0.156);
      --color-palette-thepia-a4: color(display-p3 0.6275 0.5255 1 / 0.232);
      --color-palette-thepia-a5: color(display-p3 0.6667 0.5686 1 / 0.282);
      --color-palette-thepia-a6: color(display-p3 0.698 0.6157 1 / 0.337);
      --color-palette-thepia-a7: color(display-p3 0.7176 0.651 1 / 0.404);
      --color-palette-thepia-a8: color(display-p3 0.7294 0.6627 1 / 0.509);
      --color-palette-thepia-a9: color(display-p3 0.7529 0.6902 1 / 0.761);
      --color-palette-thepia-a10: color(display-p3 0.7412 0.6745 1 / 0.706);
      --color-palette-thepia-a11: color(display-p3 0.8196 0.7843 1 / 0.862);
      --color-palette-thepia-a12: color(display-p3 0.9412 0.9333 1 / 0.937);
      --color-palette-thepia-surface: color(display-p3 0.1176 0.1098 0.1647 / 0.5);
      --color-palette-thepia-indicator: oklch(67% 0.0943 293.7);
      --color-palette-thepia-track: oklch(67% 0.0943 293.7);
      --color-palette-success-1: oklch(17.9% 0.0181 149.6);
      --color-palette-success-2: oklch(20.1% 0.0198 149.6);
      --color-palette-success-3: oklch(25.7% 0.0445 149.6);
      --color-palette-success-4: oklch(30.6% 0.0723 149.6);
      --color-palette-success-5: oklch(35.2% 0.0847 149.6);
      --color-palette-success-6: oklch(40.1% 0.0967 149.6);
      --color-palette-success-7: oklch(45.3% 0.1111 149.6);
      --color-palette-success-8: oklch(50.9% 0.1292 149.6);
      --color-palette-success-9: oklch(72.3% 0.192 149.6);
      --color-palette-success-10: oklch(68.6% 0.192 149.6);
      --color-palette-success-11: oklch(76.4% 0.192 149.6);
      --color-palette-success-12: oklch(90.9% 0.1063 149.6);
      --color-palette-success-a1: color(display-p3 0 0.9725 0 / 0.013);
      --color-palette-success-a2: color(display-p3 0.1843 0.9922 0 / 0.034);
      --color-palette-success-a3: color(display-p3 0.3529 1 0.3176 / 0.097);
      --color-palette-success-a4: color(display-p3 0.2824 1 0.3137 / 0.164);
      --color-palette-success-a5: color(display-p3 0.3686 1 0.3922 / 0.223);
      --color-palette-success-a6: color(display-p3 0.4118 1 0.4588 / 0.286);
      --color-palette-success-a7: color(display-p3 0.4353 1 0.4745 / 0.353);
      --color-palette-success-a8: color(display-p3 0.4431 1 0.498 / 0.429);
      --color-palette-success-a9: color(display-p3 0.4745 1 0.5294 / 0.744);
      --color-palette-success-a10: color(display-p3 0.4431 1 0.502 / 0.694);
      --color-palette-success-a11: color(display-p3 0.5137 1 0.5569 / 0.803);
      --color-palette-success-a12: color(display-p3 0.7765 1 0.7882 / 0.95);
      --color-palette-success-surface: color(display-p3 0.0706 0.1255 0.0667 / 0.5);
      --color-palette-success-indicator: oklch(72.3% 0.192 149.6);
      --color-palette-success-track: oklch(72.3% 0.192 149.6);
      --color-palette-warning-1: oklch(17.9% 0.0104 70.08);
      --color-palette-warning-2: oklch(20.1% 0.0165 70.08);
      --color-palette-warning-3: oklch(24.9% 0.0391 70.08);
      --color-palette-warning-4: oklch(28.5% 0.0678 70.08);
      --color-palette-warning-5: oklch(32.5% 0.0744 70.08);
      --color-palette-warning-6: oklch(37.6% 0.0739 70.08);
      --color-palette-warning-7: oklch(44.2% 0.0798 70.08);
      --color-palette-warning-8: oklch(52.8% 0.0971 70.08);
      --color-palette-warning-9: oklch(76.9% 0.1647 70.08);
      --color-palette-warning-10: oklch(73.4% 0.1647 70.08);
      --color-palette-warning-11: oklch(80.1% 0.141 70.08);
      --color-palette-warning-12: oklch(92.7% 0.0487 70.08);
      --color-palette-warning-a1: color(display-p3 0.9412 0.0667 0 / 0.009);
      --color-palette-warning-a2: color(display-p3 0.9961 0.4824 0 / 0.038);
      --color-palette-warning-a3: color(display-p3 0.9961 0.5686 0 / 0.11);
      --color-palette-warning-a4: color(display-p3 1 0.4902 0 / 0.177);
      --color-palette-warning-a5: color(display-p3 1 0.5412 0 / 0.232);
      --color-palette-warning-a6: color(display-p3 1 0.6314 0.102 / 0.286);
      --color-palette-warning-a7: color(display-p3 1 0.6863 0.2431 / 0.374);
      --color-palette-warning-a8: color(display-p3 0.9961 0.698 0.2824 / 0.5);
      --color-palette-warning-a9: color(display-p3 0.9961 0.6902 0.2471 / 0.908);
      --color-palette-warning-a10: color(display-p3 1 0.6824 0.2275 / 0.858);
      --color-palette-warning-a11: color(display-p3 1 0.7451 0.3922 / 0.921);
      --color-palette-warning-a12: color(display-p3 1 0.9176 0.8039 / 0.971);
      --color-palette-warning-surface: color(display-p3 0.1333 0.0941 0.0431 / 0.5);
      --color-palette-warning-indicator: oklch(76.9% 0.1647 70.08);
      --color-palette-warning-track: oklch(76.9% 0.1647 70.08);
      --color-palette-error-1: oklch(17.9% 0.0141 25.33);
      --color-palette-error-2: oklch(19.5% 0.0223 25.33);
      --color-palette-error-3: oklch(24% 0.0674 25.33);
      --color-palette-error-4: oklch(27.7% 0.1014 25.33);
      --color-palette-error-5: oklch(31.9% 0.1129 25.33);
      --color-palette-error-6: oklch(36.9% 0.1176 25.33);
      --color-palette-error-7: oklch(43.6% 0.1273 25.33);
      --color-palette-error-8: oklch(52.8% 0.1547 25.33);
      --color-palette-error-9: oklch(63.7% 0.2078 25.33);
      --color-palette-error-10: oklch(59.6% 0.2078 25.33);
      --color-palette-error-11: oklch(76.9% 0.1739 25.33);
      --color-palette-error-12: oklch(90.2% 0.0553 25.33);
      --color-palette-error-a1: color(display-p3 0.9608 0 0 / 0.022);
      --color-palette-error-a2: color(display-p3 0.9882 0.1529 0 / 0.047);
      --color-palette-error-a3: color(display-p3 0.9961 0.0941 0 / 0.148);
      --color-palette-error-a4: color(display-p3 1 0.0353 0 / 0.232);
      --color-palette-error-a5: color(display-p3 1 0.149 0.102 / 0.295);
      --color-palette-error-a6: color(display-p3 1 0.2706 0.2157 / 0.366);
      --color-palette-error-a7: color(display-p3 1 0.3647 0.3137 / 0.463);
      --color-palette-error-a8: color(display-p3 1 0.3922 0.3529 / 0.627);
      --color-palette-error-a9: color(display-p3 1 0.3647 0.3333 / 0.858);
      --color-palette-error-a10: color(display-p3 1 0.3216 0.298 / 0.795);
      --color-palette-error-a11: color(display-p3 1 0.5882 0.5412 / 0.933);
      --color-palette-error-a12: color(display-p3 1 0.851 0.8235 / 0.971);
      --color-palette-error-surface: color(display-p3 0.149 0.0706 0.051 / 0.5);
      --color-palette-error-indicator: oklch(63.7% 0.2078 25.33);
      --color-palette-error-track: oklch(63.7% 0.2078 25.33);
      --color-palette-info-1: oklch(17.9% 0.0246 259.8);
      --color-palette-info-2: oklch(19.6% 0.0291 259.8);
      --color-palette-info-3: oklch(25.7% 0.0665 259.8);
      --color-palette-info-4: oklch(30% 0.0948 259.8);
      --color-palette-info-5: oklch(34.5% 0.1042 259.8);
      --color-palette-info-6: oklch(39.1% 0.1091 259.8);
      --color-palette-info-7: oklch(44.4% 0.118 259.8);
      --color-palette-info-8: oklch(50.4% 0.1356 259.8);
      --color-palette-info-9: oklch(62.3% 0.188 259.8);
      --color-palette-info-10: oklch(58.2% 0.188 259.8);
      --color-palette-info-11: oklch(75% 0.1255 259.8);
      --color-palette-info-12: oklch(90.9% 0.0454 259.8);
      --color-palette-info-a1: color(display-p3 0 0.0667 1 / 0.034);
      --color-palette-info-a2: color(display-p3 0 0.3294 0.9922 / 0.06);
      --color-palette-info-a3: color(display-p3 0.1294 0.4118 1 / 0.195);
      --color-palette-info-a4: color(display-p3 0.1216 0.4 1 / 0.297);
      --color-palette-info-a5: color(display-p3 0.2039 0.4588 1 / 0.369);
      --color-palette-info-a6: color(display-p3 0.2706 0.502 1 / 0.441);
      --color-palette-info-a7: color(display-p3 0.3216 0.5451 1 / 0.526);
      --color-palette-info-a8: color(display-p3 0.3412 0.5529 1 / 0.645);
      --color-palette-info-a9: color(display-p3 0.3255 0.5373 1 / 0.928);
      --color-palette-info-a10: color(display-p3 0.2902 0.5098 1 / 0.869);
      --color-palette-info-a11: color(display-p3 0.549 0.698 0.9961 / 0.967);
      --color-palette-info-a12: color(display-p3 0.8392 0.8941 1 / 0.988);
      --color-palette-info-surface: color(display-p3 0.051 0.0941 0.1804 / 0.5);
      --color-palette-info-indicator: oklch(62.3% 0.188 259.8);
      --color-palette-info-track: oklch(62.3% 0.188 259.8);
    }
  }
}

.light, .light-theme, [data-theme="light"] {
  --color-text-1: var(--color-palette-neutral-12);
  --color-text-2: var(--color-palette-neutral-11);
  --color-text-3: var(--color-palette-neutral-10);
  --color-text-4: var(--color-palette-neutral-9);
  --color-text-primary: var(--color-text-1);
  --color-text-secondary: var(--color-text-2);
  --color-text-success: var(--color-palette-success-11);
  --color-text-warning: var(--color-palette-warning-11);
  --color-text-error: var(--color-palette-error-11);
  --color-text-info: var(--color-palette-info-11);
  --color-text-placeholder: var(--color-palette-neutral-9);
  --color-bg-1: var(--color-palette-neutral-1);
  --color-bg-2: var(--color-palette-neutral-3);
  --color-bg-3: var(--color-palette-neutral-5);
  --color-bg-primary: var(--color-palette-neutral-1);
  --color-bg-success: var(--color-palette-success-a3);
  --color-bg-warning: var(--color-palette-warning-a3);
  --color-bg-error: var(--color-palette-error-a3);
  --color-bg-info: var(--color-palette-info-a3);
  --color-bg-secondary: var(--color-palette-neutral-3);
  --color-bg-muted: var(--color-palette-neutral-2);
  --color-bg-primary-hover: var(--color-palette-neutral-3);
  --color-bg-secondary-hover: var(--color-palette-neutral-5);
  --color-bg-disabled-input: var(--color-palette-neutral-3);
  --color-bg-disabled-primary: var(--color-palette-neutral-5);
  --color-bg-disabled-secondary: var(--color-palette-neutral-3);
  --color-disabled-text: var(--color-palette-neutral-9);
  --color-border-1: var(--color-palette-neutral-5);
  --color-border-2: var(--color-palette-neutral-7);
  --color-border-3: var(--color-palette-neutral-9);
  --color-border-default: var(--color-palette-neutral-5);
  --color-border-subtle: var(--color-palette-neutral-3);
  --color-border-separator: var(--color-border-subtle);
  --color-border-control: var(--color-border-default);
  --color-border-strong: var(--color-border-2);
  --color-border-track: var(--color-palette-neutral-6);
  --color-border-success: var(--color-palette-success-a7);
  --color-border-warning: var(--color-palette-warning-a7);
  --color-border-error: var(--color-palette-error-a7);
  --color-border-info: var(--color-palette-info-a7);
  --color-surface-base: var(--color-palette-neutral-1);
  --color-surface-raised: var(--color-palette-neutral-1);
  --color-icon-1: var(--color-palette-neutral-11);
  --color-icon-2: var(--color-palette-neutral-10);
  --color-icon-3: var(--color-palette-neutral-9);
  --color-icon-muted: var(--color-icon-3);
  --color-icon-disabled: var(--color-icon-3);
  --color-icon-success: var(--color-palette-success-11);
  --color-icon-warning: var(--color-palette-warning-11);
  --color-icon-error: var(--color-palette-error-11);
  --color-icon-info: var(--color-palette-info-11);
  --color-interactive-disabled: var(--color-palette-neutral-7);
  --color-palette-thepia-1: #fcfcfe;
  --color-palette-thepia-2: #f9f9fe;
  --color-palette-thepia-3: #f3f1fc;
  --color-palette-thepia-4: #eae6fd;
  --color-palette-thepia-5: #e0dafb;
  --color-palette-thepia-6: #d4ccf5;
  --color-palette-thepia-7: #c2b8ea;
  --color-palette-thepia-8: #aa9cdd;
  --color-palette-thepia-11: #685a96;
  --color-palette-thepia-12: #342854;
  --color-palette-thepia-a1: #0000aa03;
  --color-palette-thepia-a2: #0000d506;
  --color-palette-thepia-a3: #2500c90e;
  --color-palette-thepia-a4: #2900eb19;
  --color-palette-thepia-a5: #2a00e425;
  --color-palette-thepia-a6: #2800cd33;
  --color-palette-thepia-a7: #2400b447;
  --color-palette-thepia-a8: #2500a863;
  --color-palette-thepia-a9: #1f008c75;
  --color-palette-thepia-a10: #1c007d81;
  --color-palette-thepia-a11: #16005da5;
  --color-palette-thepia-a12: #0e0034d7;
  --color-palette-thepia-surface: #f8f8fecc;
  --color-palette-neutral-1: #fcfcfd;
  --color-palette-neutral-2: #f9f9fb;
  --color-palette-neutral-3: #eff0f3;
  --color-palette-neutral-4: #e7e8ec;
  --color-palette-neutral-5: #e0e1e6;
  --color-palette-neutral-6: #d8d9e0;
  --color-palette-neutral-7: #cdced7;
  --color-palette-neutral-8: #b9bbc6;
  --color-palette-neutral-9: #8b8d98;
  --color-palette-neutral-10: #80828d;
  --color-palette-neutral-11: #62636c;
  --color-palette-neutral-12: #1e1f24;
  --color-palette-neutral-a1: #00005503;
  --color-palette-neutral-a2: #00005506;
  --color-palette-neutral-a3: #00104010;
  --color-palette-neutral-a4: #000b3618;
  --color-palette-neutral-a5: #0009321f;
  --color-palette-neutral-a6: #00073527;
  --color-palette-neutral-a7: #00063332;
  --color-palette-neutral-a8: #00083046;
  --color-palette-neutral-a9: #00051d74;
  --color-palette-neutral-a10: #00051b7f;
  --color-palette-neutral-a11: #0002119d;
  --color-palette-neutral-a12: #000107e1;
  --color-palette-neutral-surface: #ffffffcc;
  --color-palette-neutral-indicator: #8b8d98;
  --color-palette-neutral-track: #8b8d98;
  --color-palette-neutral-background: var(--color-palette-neutral-1);
  --color-palette-success-1: #F9FEFA;
  --color-palette-success-2: #F3FCF4;
  --color-palette-success-3: #E3F9E6;
  --color-palette-success-4: #D1F4D6;
  --color-palette-success-5: #BAEEC3;
  --color-palette-success-6: #9EE4AB;
  --color-palette-success-7: #76D68B;
  --color-palette-success-8: #1EC35C;
  --color-palette-success-11: #008527;
  --color-palette-success-12: #0E3F1D;
  --color-palette-success-a1: #F8FFF9AA;
  --color-palette-success-a2: #17FC180A;
  --color-palette-success-a3: #07DF1C1A;
  --color-palette-success-a4: #02CD1B2C;
  --color-palette-success-a5: #01C72043;
  --color-palette-success-a6: #03BD2360;
  --color-palette-success-a7: #00B42888;
  --color-palette-success-a8: #00BB46E1;
  --color-palette-success-a9: #00BC45DD;
  --color-palette-success-a10: #00B953;
  --color-palette-success-a11: #008527;
  --color-palette-success-a12: #003410F1;
  --color-palette-success-surface: #F1FDF1CC;
  --color-palette-warning-1: #FEFCFA;
  --color-palette-warning-2: #FFF7E7;
  --color-palette-warning-3: #FFEFCD;
  --color-palette-warning-4: #FFE4B7;
  --color-palette-warning-5: #FFD99D;
  --color-palette-warning-6: #FFC877;
  --color-palette-warning-7: #FFB453;
  --color-palette-warning-8: #F19A00;
  --color-palette-warning-11: #AC6500;
  --color-palette-warning-12: #4F3515;
  --color-palette-warning-a1: #FFFCF9AA;
  --color-palette-warning-a2: #FFF7E7;
  --color-palette-warning-a3: #FFEFCD;
  --color-palette-warning-a4: #FFE4B7;
  --color-palette-warning-a5: #FFD99D;
  --color-palette-warning-a6: #FFC877;
  --color-palette-warning-a7: #FFB453;
  --color-palette-warning-a8: #F19A00;
  --color-palette-warning-a9: #F59A00F4;
  --color-palette-warning-a10: #E99300;
  --color-palette-warning-a11: #AC6500;
  --color-palette-warning-a12: #3F2300EA;
  --color-palette-warning-surface: #FFF6E2CC;
  --color-palette-error-1: #FFFCFB;
  --color-palette-error-2: #FFF7F6;
  --color-palette-error-3: #FFEBE9;
  --color-palette-error-4: #FFDBD6;
  --color-palette-error-5: #FFCCC6;
  --color-palette-error-6: #FFBCB5;
  --color-palette-error-7: #F8A8A0;
  --color-palette-error-8: #F08C84;
  --color-palette-error-10: #E13237;
  --color-palette-error-11: #D3232C;
  --color-palette-error-12: #661717;
  --color-palette-error-a1: #FFFCFB;
  --color-palette-error-a2: #FFF7F6;
  --color-palette-error-a3: #FFEBE9;
  --color-palette-error-a4: #FFDBD6;
  --color-palette-error-a5: #FFCCC6;
  --color-palette-error-a6: #FFBCB5;
  --color-palette-error-a7: #F219015E;
  --color-palette-error-a8: #E312017A;
  --color-palette-error-a9: #EB0201BB;
  --color-palette-error-a10: #DB0106CD;
  --color-palette-error-a11: #CC000BDC;
  --color-palette-error-a12: #570000E8;
  --color-palette-error-surface: #FFF6F5CC;
  --color-palette-info-1: #FBFCFF;
  --color-palette-info-2: #F5F9FF;
  --color-palette-info-3: #EAF2FF;
  --color-palette-info-4: #DCEBFF;
  --color-palette-info-5: #CBE1FF;
  --color-palette-info-6: #B8D4FF;
  --color-palette-info-7: #9FC2FB;
  --color-palette-info-8: #7BAAF6;
  --color-palette-info-10: #2C74E9;
  --color-palette-info-11: #256CDE;
  --color-palette-info-12: #123164;
  --color-palette-info-a1: #FBFCFF;
  --color-palette-info-a2: #F5F9FF;
  --color-palette-info-a3: #EAF2FF;
  --color-palette-info-a4: #DCEBFF;
  --color-palette-info-a5: #CBE1FF;
  --color-palette-info-a6: #B8D4FF;
  --color-palette-info-a7: #0361F85F;
  --color-palette-info-a8: #005CF083;
  --color-palette-info-a9: #015EF3C4;
  --color-palette-info-a10: #0158E5D3;
  --color-palette-info-a11: #0053D8DA;
  --color-palette-info-a12: #002158ED;
  --color-palette-info-surface: #F4F9FFCC;
  --color-action-secondary-bg: var(--color-palette-neutral-a3);
  --color-action-secondary-bg-hover: var(--color-palette-neutral-a4);
  --color-action-secondary-bg-active: var(--color-palette-neutral-a5);
  --color-action-secondary-border: var(--color-border-2);
  --color-action-secondary-text: var(--color-text-1);
}
/**
 * Thepia Component Styles
 *
 * Prebuilt component classes built on @thepia/branding CSS custom properties.
 * Load tokens.css first so these variables are defined.
 *
 * Usage:
 * @import '@thepia/branding/css';
 * @import '@thepia/branding/css/components';
 */

/* Fixes the `components` layer's priority relative to third-party UI libraries used alongside
   it (e.g. @thepia/branding/react/ThemeShowcase's @radix-ui/themes integration, which loads its
   own stylesheet inside a `thepia-radix-themes` layer) — whichever of the two stylesheets loads
   first, this identical statement is duplicated there too, so the relative order is fixed
   correctly either way. Without an explicit order, unlayered CSS always outranks layered CSS
   regardless of specificity, silently breaking overrides here.

   `reset` is declared lowest-priority on purpose, reserved for future bare-element defaults;
   it is empty today. Just above it, `semantic` holds the classless styling that source lives in
   src/css/primo/*.css and ships (only) inside the combined `@thepia/branding/css/primitivo`
   bundle — a scoped, PicoCSS-style baseline for plain markup inside a region (a <form>, <dialog>,
   <menu>, or <t-primo>), <button> included; it styles nothing outside a region. `semantic` is
   named here in the order line so a consumer loading `css/components` alongside `css/primitivo`
   gets a consistent, first-seen layer order; primo's _base.css duplicates this identical
   statement so primitivo pins the same order on its own. `components` always wins over `semantic`
   regardless of selector specificity (.btn's `background: transparent` beats a bare `button`
   even though a class selector would've won anyway), and any *unlayered* CSS a consuming app
   already ships beats both, so neither can ever clobber real app styling.

   `theme, base, utilities` are Tailwind v4's own layers, reserved here in the correct
   positions so a Tailwind consumer (e.g. thepia.com) gets sane precedence no matter which
   stylesheet loads first. The load-bearing constraint: `base` (Tailwind's Preflight, which
   sets `button { padding: 0 }`) MUST come before `components`, or Preflight silently zeroes
   every .btn-* button's padding — layer order beats specificity, so `button{padding:0}` in a
   later layer wins over `.btn-solid{padding:...}` in an earlier one. `utilities` stays last so
   `px-8`/`text-lg` etc. still override the button defaults. When primitivo.css is a separate
   <link> that loads BEFORE the Tailwind bundle, this first-seen declaration pins the order for
   both; a non-Tailwind consumer just gets three empty, harmless layer names. */
@layer reset, semantic, thepia-radix-themes, theme, base, components, utilities;

@layer components {
  /* Form Group */
  .form-group-brand {
    margin-bottom: 1.5rem;
  }

  .form-group-brand label {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
  }

  .form-group-brand .form-error {
    color: var(--color-text-error);
    font-size: 0.75rem;
    margin-top: 0.25rem;
  }

  /* Card Components */
  .card-brand {
    background: var(--color-surface-raised);
    border-radius: var(--size-radius-6);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }

  .card-brand-header {
    background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-primaryHover));
    color: var(--color-action-primary-text);
    padding: 2rem;
    text-align: center;
  }

  .card-brand-body {
    padding: 2rem;
  }

  .card-brand-footer {
    background: var(--color-bg-muted);
    padding: 1.5rem 2rem;
    border-top: var(--size-stroke-thin) solid var(--color-border-subtle);
  }

  /* Loading Components */
  .loading-spinner-brand {
    width: 1.25rem;
    height: 1.25rem;
    border: var(--size-stroke-thick) solid rgba(152, 138, 202, 0.3);
    border-radius: 50%;
    border-top-color: var(--color-brand-primary);
    animation: spin 1s ease-in-out infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Alert Components */
  .alert-brand-success {
    background: var(--color-bg-success);
    border: var(--size-stroke-thin) solid var(--color-border-success);
    color: var(--color-text-success);
    padding: 1rem;
    border-radius: var(--size-radius-3);
    margin-bottom: 1rem;
  }

  .alert-brand-error {
    background: var(--color-bg-error);
    border: var(--size-stroke-thin) solid var(--color-border-error);
    color: var(--color-text-error);
    padding: 1rem;
    border-radius: var(--size-radius-3);
    margin-bottom: 1rem;
  }

  .alert-brand-warning {
    background: var(--color-bg-warning);
    border: var(--size-stroke-thin) solid var(--color-border-warning);
    color: var(--color-text-warning);
    padding: 1rem;
    border-radius: var(--size-radius-3);
    margin-bottom: 1rem;
  }

  .alert-brand-info {
    background: var(--color-bg-info);
    border: var(--size-stroke-thin) solid var(--color-border-info);
    color: var(--color-text-info);
    padding: 1rem;
    border-radius: var(--size-radius-3);
    margin-bottom: 1rem;
  }

  /* Popover Component (native [popover] surface styling only - positioning is the
     consumer's job, e.g. anchor positioning or a wrapper element) */
  .popover-brand {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border: var(--size-stroke-thin) solid var(--color-border-subtle);
    border-radius: var(--size-radius-6);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    margin: 0;
    opacity: 0;
    transform: scale(0.95) translateY(-0.25rem);
    transition:
      opacity 0.15s ease,
      transform 0.15s ease,
      display 0.15s allow-discrete,
      overlay 0.15s allow-discrete;
  }

  .popover-brand:popover-open {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  @starting-style {
    .popover-brand:popover-open {
      opacity: 0;
      transform: scale(0.95) translateY(-0.25rem);
    }
  }

  /* Dialog Component (native <dialog>, opened via showModal()) */
  .dialog-brand {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border: none;
    border-radius: var(--size-radius-6);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    padding: 2rem;
    width: min(90vw, 28rem);
    max-height: min(85vh, 40rem);
    opacity: 0;
    transform: scale(0.95);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      display 0.2s allow-discrete,
      overlay 0.2s allow-discrete;
  }

  .dialog-brand[open] {
    opacity: 1;
    transform: scale(1);
  }

  @starting-style {
    .dialog-brand[open] {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  .dialog-brand::backdrop {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
  }

  .dialog-brand[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .dialog-brand[open]::backdrop {
      opacity: 0;
    }
  }

}

/**
 * Shared `:host([size=...])` -> `--icon-size-current` mapping, for ANY
 * custom element that embeds a <t-icon> inside its own shadow DOM and
 * wants a `size` attribute using t-icon's own six-tier vocabulary (numeric
 * 1-6 / T-shirt xs-2xl, same --icon-size-* tokens as t-icon.css). Raw-import
 * (Vite `?raw`) + `unsafeCSS()` this into that element's own `static
 * styles` array alongside its own rules -- see src/elements/mode-switch.ts
 * + src/css/elements/mode-switch.css for the reference usage.
 *
 * A consuming element still needs its OWN rule(s) to actually apply
 * `--icon-size-current` somewhere -- typically `font-size: var(--icon-size-
 * current, var(--icon-size-md))` on :host (the `, var(--icon-size-md))`
 * fallback covers size="" unset, so this file itself declares no default).
 * If a <t-icon> inside sits behind a <button>/other UA form control, that
 * element also needs its own `font: inherit` on that wrapper -- form
 * controls get a non-inherited UA-default font (confirmed empirically:
 * Chromium gives <button> a UA default distinct from its ancestor's
 * font-size), which silently breaks the --icon-size-current -> t-icon
 * `1em` inheritance chain if left unset. See mode-switch.css's own
 * `:host button { font: inherit; ... }` rule.
 *
 * Every rule here is a bare `:host([size=...])` -- tag-name-agnostic by
 * construction (`:host` always self-refers to whichever custom element
 * it's used inside), so no per-consumer duplication is needed for this
 * half. It's ALSO safe to be picked up by build.js's generateComponentCSS()
 * glob (every src/css/elements/*.css file is, automatically) even though
 * it's meant to be raw-imported rather than used standalone: `:host` only
 * has meaning inside a real shadow tree, so parsed in the global
 * stylesheet context it matches nothing and is inert -- same reasoning
 * mode-switch.css's own header comment documents for its `:host` rules.
 */
:host([size='1']),
:host([size='xs']) {
  --icon-size-current: var(--icon-size-xs);
}
:host([size='2']),
:host([size='sm']) {
  --icon-size-current: var(--icon-size-sm);
}
:host([size='3']),
:host([size='md']) {
  --icon-size-current: var(--icon-size-md);
}
:host([size='4']),
:host([size='lg']) {
  --icon-size-current: var(--icon-size-lg);
}
:host([size='5']),
:host([size='xl']) {
  --icon-size-current: var(--icon-size-xl);
}
:host([size='6']),
:host([size='2xl']) {
  --icon-size-current: var(--icon-size-2xl);
}

/**
 * Badge -- a small inline status label ("New", "Beta", a count). Pill-shaped by
 * DEFAULT (a badge reads as a pill), so it carries the full radius itself; the
 * separate `.pill` shape utility stays free for rounding other controls, and
 * `.square` gives a rectangular chip. Sized in `em` so it scales with the
 * surrounding text, and `vertical-align: middle` keeps it on the text line when
 * used inline in prose.
 *
 * Colour is the primary action fill; brand-specific / status variants
 * (.badge-neutral, -success, ...) can grow later.
 */
@layer semantic {
  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.6em;
    padding-inline: 0.75em;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-action-primary-text);
    background: var(--color-action-primary-bg);
    border-radius: var(--size-radius-full);
  }
}

/**
 * Button component classes (@layer components). A TREATMENT axis and a PALETTE
 * axis, plus separate SIZE and SHAPE axes:
 *
 *   TREATMENT (fill/border style), each with a sensible DEFAULT palette:
 *     .btn-solid    filled              default palette: BRAND (the primary CTA)
 *     .btn-outline  transparent+border  default palette: NEUTRAL gray (also the bare-<button> look)
 *     .btn-soft     neutral fill        the quiet action (.btn-secondary is an alias)
 *     .btn-ghost    transparent, chrome-less (toolbars/icons)
 *
 *   PALETTE (colour), overrides the treatment's default palette:
 *     .btn-brand    brand hue      .btn-danger   error hue    (add -success / -warning / -info likewise)
 *     e.g. `.btn-brand.btn-outline` = brand outline; `.btn-danger.btn-solid` = danger solid.
 *
 *   SIZE (separate, composable): .btn-0 / .btn-1 / .btn-2 (default) / .btn-3
 *   SHAPE: .btn-icon (square, no text gap; width follows the shared --btn-h).
 *
 * Colour rides on private knobs the base sets to NEUTRAL defaults, treatments read, and palette
 * classes repoint: --_ink (text when unfilled), --_line (border), --_fill (solid bg), --_on
 * (text on a fill), plus the --_*-hover pair. The base rule paints the OUTLINE treatment, so a
 * bare `.btn-brand` (palette, no treatment) or the classless baseline defaults to outline.
 *
 * The classless bare <button> baseline (same neutral outline) lives in primo
 * (src/css/primo/button.css), scoped to a region (form/dialog/menu/t-primo/.prose); a standalone
 * button outside a region opts in with a .btn-* class or a <t-primo> wrapper.
 *
 * Retired: bare `.btn` and `.btn-brand-outline` (use `.btn-brand.btn-outline`). `.btn-secondary`
 * still aliases `.btn-soft`. `.btn-brand` is now the brand PALETTE modifier, not "brand solid"
 * (that is plain `.btn-solid`). --btn-h stays the single height source the size classes redefine
 * and .btn-icon reads for its square.
 */
@layer components {
  /* Shared base: layout, default size-2 metrics, NEUTRAL palette knobs, and the OUTLINE treatment
     (so a palette-only or classless button defaults to a neutral outline). */
  .btn-solid,
  .btn-outline,
  .btn-soft,
  .btn-secondary,
  .btn-ghost,
  .btn-brand,
  .btn-danger {
    /* palette knobs — neutral by default; --_fill defaults BRAND because only .btn-solid reads it
       and solid's default palette is brand. */
    --_ink: var(--color-text-1);
    --_line: var(--color-border-strong);
    --_fill: var(--color-action-primary-bg);
    --_fill-hover: var(--color-action-primary-bg-hover);
    --_on: var(--color-action-primary-text);
    --_hover-bg: var(--color-action-secondary-bg-hover); /* subtle tint for unfilled hover */
    --_hover-ink: var(--_ink);
    --_hover-line: var(--_line);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* --btn-h / --btn-radius are PUBLIC container knobs (see component-knobs.yaml): the base READS
       them (never sets --btn-h on itself) so a container can set them once and every button inside
       inherits, while a size class opts a single button out by setting --btn-h explicitly. .btn-icon
       reads the same --btn-h for its square. */
    min-height: var(--btn-h, var(--height-btn));
    padding: 0 1.5rem;
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: 1.25rem;
    border-radius: var(--btn-radius, var(--size-radius-button));
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;

    /* default treatment = OUTLINE */
    background: transparent;
    color: var(--_ink);
    border: var(--size-stroke-thick) solid var(--_line);
  }

  .btn-solid:disabled,
  .btn-outline:disabled,
  .btn-soft:disabled,
  .btn-secondary:disabled,
  .btn-ghost:disabled,
  .btn-brand:disabled,
  .btn-danger:disabled {
    cursor: not-allowed;
    color: var(--color-disabled-text);
  }

  /* --- palette classes: repoint the knobs. Declared before treatments so treatment rules can still
     override the paint they own (e.g. solid's fill), and after the base so they beat the neutral
     defaults. --- */
  .btn-brand {
    --_ink: var(--color-brand-primary);
    --_line: var(--color-brand-primary);
    /* --_fill already brand */
    --_hover-bg: var(--color-brand-primary); /* brand outline/ghost fill on hover (the current look) */
    --_hover-ink: var(--color-action-primary-text);
    --_hover-line: var(--color-brand-primary);
  }
  .btn-danger {
    --_ink: var(--color-text-error);
    --_line: var(--color-border-error);
    --_fill: var(--color-palette-error-9);
    --_fill-hover: var(--color-palette-error-10);
    --_on: var(--color-palette-error-1); /* TODO(contrast): confirm text-on-red vs an inverse token */
    --_hover-bg: var(--color-palette-error-9);
    --_hover-ink: var(--color-palette-error-1);
    --_hover-line: var(--color-palette-error-9);
  }

  /* --- treatment: solid (filled; default palette brand) --- */
  .btn-solid {
    background: var(--_fill);
    color: var(--_on);
    border: none;
  }
  .btn-solid:hover:not(:disabled) {
    background: var(--_fill-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(152, 138, 202, 0.3);
  }
  .btn-solid:active:not(:disabled) {
    background: var(--_fill-hover);
    transform: translateY(0);
  }
  .btn-solid:disabled {
    background: var(--color-bg-disabled-primary);
  }

  /* --- treatment: soft (neutral fill + thin border) --- */
  .btn-soft,
  .btn-secondary {
    background: var(--color-action-secondary-bg);
    color: var(--_ink);
    border-width: var(--size-stroke-thin);
    border-color: var(--_line);
  }
  .btn-soft:disabled,
  .btn-secondary:disabled {
    background: var(--color-bg-disabled-secondary);
  }

  /* --- treatment: ghost (transparent, chrome-less) --- */
  .btn-ghost {
    background: transparent;
    border: none;
    color: var(--_ink);
  }

  /* --- unfilled treatments (outline / soft / ghost / palette-only) hover + focus. Excludes solid,
     which owns its own fill hover above. --- */
  .btn-outline:not(:disabled):hover,
  .btn-soft:not(.btn-solid):not(:disabled):hover,
  .btn-secondary:not(:disabled):hover,
  .btn-ghost:not(:disabled):hover,
  .btn-brand:not(.btn-solid):not(:disabled):hover,
  .btn-danger:not(.btn-solid):not(:disabled):hover {
    background: var(--_hover-bg);
    color: var(--_hover-ink);
    border-color: var(--_hover-line);
  }

  .btn-outline:disabled,
  .btn-ghost:disabled {
    background: transparent;
    border-color: var(--color-interactive-disabled);
  }

  /* --- focus: provisional for every treatment. FOCUS: how we indicate focus is an open, undefined
     topic (see segmented.css). TODO(focus): define the system-wide treatment. --- */
  .btn-solid:focus-visible,
  .btn-outline:focus-visible,
  .btn-soft:focus-visible,
  .btn-secondary:focus-visible,
  .btn-ghost:focus-visible,
  .btn-brand:focus-visible,
  .btn-danger:focus-visible {
    outline: var(--size-stroke-thick) solid var(--color-border-brand);
    outline-offset: 2px;
    border-color: transparent;
  }

  /* --- shape: icon-only (square box). Width AND height read the shared --btn-h so the box is an
     exact square that tracks the active size class. Declared after treatments so its padding wins. --- */
  .btn-icon {
    width: var(--btn-h, var(--height-btn));
    height: var(--btn-h, var(--height-btn));
    padding: 0;
    gap: 0;
    border-radius: var(--btn-radius, var(--size-radius-button));
  }

  /* --- size (separate axis): override the base size-2 metrics. --- */
  /* size 0: inline, text-aligned (<= 22px) for inline prose actions; compose with .btn-ghost. */
  .btn-0 {
    --btn-h: var(--height-btn0);
    padding: 0 0.5rem;
    gap: 0.25rem;
    font-size: var(--font-size-xs);
    line-height: 1rem;
  }
  .btn-1 {
    --btn-h: var(--height-compact);
    padding: 0 1rem;
    font-size: var(--font-size-xs);
    line-height: 1rem;
  }
  .btn-2 {
    --btn-h: var(--height-btn);
    padding: 0 1.5rem;
    font-size: var(--font-size-sm);
    line-height: 1.25rem;
  }
  .btn-3 {
    --btn-h: var(--height-hero);
    padding: 0 2rem;
    font-size: var(--font-size-base);
    line-height: 1.5rem;
  }

  .btn-icon.btn-2,
  .btn-icon.btn-3 {
    padding: 0;
  }
}

/**
 * Component heights -- platform-context mapping (was platform-sizing.css).
 *
 * The RAW values are design tokens now, defined in src/tokens/sizes.json under
 * the top-level `height` group and emitted by the build as context-specific
 * vars: `--height-desktop-*` and `--height-touch-*` (both live under :root, they
 * are just definitions). This file is the thin, hand-authored MAPPING that picks
 * one context and exposes the single consumer var components actually read:
 * `--height-btn`, `--height-field`, `--height-header`, etc.
 *
 * Height is the axis where platforms genuinely diverge (a cursor is precise, a
 * finger is coarse). Flipping the context retunes every control at once because
 * components read only the consumer var.
 *
 *   Desktop (pointer) is the :root default -- native app and web share it.
 *   Touch (coarse pointer) is opt-in: class="touch" (or [data-platform="touch"]).
 *
 * This is the SAME "frame" model as light/dark: the selectors are deliberately
 * UNSCOPED (a class / [data-platform] on ANY element, not just :root), so a
 * wrapper can switch the context for its subtree and custom-property inheritance
 * -- including across shadow boundaries -- carries it down. Mirrors the
 * `.dark, [data-theme="dark"]` blocks the color build emits.
 *
 * Both branches redeclare EVERY var (not just the ones that differ) so a
 * `.desktop` subtree nested inside a `.touch` page fully RESETS -- avoiding the
 * exact gap the color system originally had (a `[data-theme="dark"]` override
 * with no `[data-theme="light"]` reset; see demo ThemeFrame.astro).
 *
 * Two ways to use:
 *   - whole app:  <html class="touch">        (desktop needs no class)
 *   - a subtree:  <section class="touch">      (scoped switch -- the demo does
 *                 this to show both contexts on one page)
 *
 * btn-hero-font is a font-size companion (not a height) but rides along because
 * it also swaps per platform.
 */
@layer semantic {
  :root,
  .desktop,
  [data-platform="desktop"] {
    --height-prose: var(--height-desktop-prose);
    --height-header: var(--height-desktop-header);
    --height-field: var(--height-desktop-field);
    --height-btn: var(--height-desktop-btn);
    --height-compact: var(--height-desktop-compact);
    --height-btn0: var(--height-desktop-btn0);
    --height-hero: var(--height-desktop-hero);
    --height-hero-font: var(--height-desktop-hero-font);
    --height-toolbar: var(--height-desktop-toolbar);
    --height-glyph: var(--height-desktop-glyph);
  }

  .touch,
  [data-platform="touch"] {
    --height-prose: var(--height-touch-prose);
    --height-header: var(--height-touch-header);
    --height-field: var(--height-touch-field);
    --height-btn: var(--height-touch-btn);
    --height-compact: var(--height-touch-compact);
    --height-btn0: var(--height-touch-btn0);
    --height-hero: var(--height-touch-hero);
    --height-hero-font: var(--height-touch-hero-font);
    --height-toolbar: var(--height-touch-toolbar);
    --height-glyph: var(--height-touch-glyph);
  }

  /* Auto-detect: a coarse pointer defaults to touch UNLESS an ancestor has
     explicitly opted back to desktop -- mirrors @media (prefers-color-scheme).
     An explicit .touch/.desktop class always wins over this. */
  @media (pointer: coarse) {
    :root:not(.desktop):not([data-platform="desktop"]) {
      --height-prose: var(--height-touch-prose);
      --height-header: var(--height-touch-header);
      --height-field: var(--height-touch-field);
      --height-btn: var(--height-touch-btn);
      --height-compact: var(--height-touch-compact);
      --height-btn0: var(--height-touch-btn0);
      --height-hero: var(--height-touch-hero);
      --height-hero-font: var(--height-touch-hero-font);
      --height-toolbar: var(--height-touch-toolbar);
      --height-glyph: var(--height-touch-glyph);
    }
  }
}

/**
 * .field — a text input decorated with a leading and/or trailing <t-icon>
 * (a search field with a magnifier, an email field with a mail glyph, a field
 * with a trailing status/clear icon). An icon can't live inside a void <input>,
 * so this thin wrapper lays one OVER a real field and pads the text clear of it.
 * The <input> keeps ALL of its primo / .input-brand styling — border, height,
 * focus, validation — untouched; we only add the icon and the padding.
 *
 * Lives in @layer components (a .class opt-in like .segmented / .btn-*), so it
 * cleanly overrides primo's classless field padding. `:has()` decides which side
 * gets padded from where the icon sits, so the markup is just the natural order:
 *
 *   <span class="field">                        leading (icon before input)
 *     <t-icon name="search"></t-icon>
 *     <input type="search" placeholder="Search…" />
 *   </span>
 *
 *   <span class="field">                        trailing (icon after input)
 *     <input type="email" placeholder="you@thepia.net" />
 *     <t-icon name="mail"></t-icon>
 *   </span>
 *
 * An icon on each side is just both together.
 */
@layer components {
  .field {
    display: inline-flex;
    align-items: center;
    position: relative;
    inline-size: 100%;
  }
  .field > input {
    inline-size: 100%;
  }

  /* The icon rides over the field: vertically centred, muted to placeholder
     weight, and click-through so a tap still lands in the input. Sized off the
     shared --icon-size-sm token; colour is currentColor via the muted set. */
  .field > t-icon {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    font-size: var(--icon-size-sm);
    color: var(--color-text-placeholder);
    pointer-events: none;
  }

  /* Leading icon (first child) — pin to the start edge, pad the text past it. */
  .field > t-icon:first-child {
    inset-inline-start: 0.85rem;
  }
  .field:has(> t-icon:first-child) > input {
    padding-inline-start: 2.5rem;
  }

  /* Trailing icon (last child) — pin to the end edge, pad the text past it. */
  .field > t-icon:last-child {
    inset-inline-end: 0.85rem;
  }
  .field:has(> t-icon:last-child) > input {
    padding-inline-end: 2.5rem;
  }
}

@layer components {
      /* Input Components */
  .input-brand {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    line-height: var(--leading-tight);
    border: var(--size-stroke-thick) solid var(--color-border-control);
    border-radius: var(--size-radius-input);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: all 0.2s ease-in-out;
  }

  /* FOCUS: provisional — how we indicate focus is an open, undefined topic
     (see segmented.css). TODO(focus): define the system-wide treatment. */
  .input-brand:focus {
    outline: none;
    border-color: var(--color-border-brand);
    box-shadow: var(--shadow-input-focus);
  }

  .input-brand:hover {
    border-color: var(--color-border-strong);
  }

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

  .input-brand:disabled {
    background: var(--color-bg-disabled-input);
    color: var(--color-disabled-text);
    cursor: not-allowed;
  }
}
/**
 * <mode-switch> styles -- ONE shared source, consumed two ways (see
 * docs/CUSTOM_ELEMENTS.md "FOUCE" and docs/MODE_SWITCH.md):
 *
 *   1. Auto-concatenated into dist/css/components.css / primitivo.css by
 *      build.js's generateComponentCSS() (this directory's existing glob --
 *      every *.css file here is picked up automatically, nothing to
 *      register by hand). This is the LIGHT-DOM-facing half: the FOUCE
 *      placeholder rule below, matched against the <mode-switch> tag itself.
 *
 *   2. Raw-imported (Vite `?raw`) into src/elements/mode-switch.ts's own
 *      `static styles` via `unsafeCSS()`, alongside `_icon-size-vars.css`
 *      (the `size`-attribute-to-token mapping, shared with any other
 *      element that embeds a <t-icon> -- see that file) -- the SHADOW-DOM-
 *      facing half: real internal chrome, sourced from this one file
 *      instead of hand-duplicated inside a second css`` template literal.
 *
 * Every internal rule below is written as `:host ...` (never a bare
 * `button {}`) specifically so this file stays safe to also parse in the
 * global (1) context: `:host` only has meaning inside an actual shadow
 * tree -- parsed anywhere else (a plain document-level stylesheet), the
 * whole compound selector simply never matches anything, so nothing here
 * leaks onto unrelated <button> elements site-wide. A bare `button {}}`
 * rule would NOT have been safe to share this way.
 *
 * The background/padding/border-radius/hover/active/focus chrome lives on
 * `:host` itself (the element's own box, styleable from OUTSIDE the shadow
 * tree too), NOT on the inner <button> -- deliberately, so a consumer can
 * drop the real `.btn`/`.btn-icon` classes (button.css) directly onto
 * `<mode-switch class="btn btn-icon">` and have them cleanly override this
 * default chrome: an outer-tree rule targeting the host always wins over an
 * equivalent-specificity `:host` rule for the same property (verified
 * empirically elsewhere this session), so `.btn-icon`'s own `padding`/
 * `border-radius` and `.btn`'s own `background` simply take over. The inner
 * <button> is a near-invisible full-size hit target (no background/padding
 * of its own) so there's exactly one visible circle, not two nested ones.
 * `background` always paints under `padding` up to the border edge by CSS
 * spec, so the circle "includes the padding" automatically, by construction
 * -- for both the default chrome below AND a consumer's own `.btn-icon`.
 *
 * Deliberately NOT `width`/`height` + `box-sizing` on :host to reach the
 * same total size the old (icon-size + 1rem) calc' produced: :host's own
 * box-sizing can be overridden from outside as easily as any other property
 * (same "outer wins" rule), so an explicit width/height here would silently
 * mean something different under a consumer's global `border-box` reset
 * (very common -- Tailwind preflight, modern-normalize) than under the
 * default `content-box`. Sidestepped entirely by leaving :host's own
 * width/height unset (content-driven auto-sizing, immune to box-sizing --
 * it only reinterprets an EXPLICIT dimension) and giving the inner <button>
 * an explicit `1em` size instead, which is unambiguous either way since it
 * carries no padding/border of its own for box-sizing to reinterpret.
 */

/* --icon-size-current (set by _icon-size-vars.css's `[size=...]` rules,
   shared/tag-agnostic -- see that file) drives the box in BOTH contexts
   below (0.5rem padding + the icon's own --icon-size-* token, same
   rendered proportions as the .btn.btn-icon + t-icon[size] combo this
   element replaces in demo/src/components/Navbar.astro). The `mode-
   switch[size=...]` rules here are this file's own tag-specific half of
   that mapping (needed for the pre-upgrade FOUCE placeholder box below,
   which only has light-DOM CSS to work with -- :host doesn't exist yet) --
   not a duplicate of _icon-size-vars.css's job, just the one half of it
   that has to be per-tag by necessity. */
@layer components {
  mode-switch:not(:defined) {
    visibility: hidden;
  }

  /* Reserved before Lit upgrades the element, so nothing reflows the
     instant it does -- only meaningful pre-upgrade (no content exists yet
     to auto-size from the way :host's content-driven sizing below does),
     so this one DOES need an explicit calc'd total. */
  mode-switch {
    display: inline-flex;
    width: calc(var(--icon-size-current, var(--icon-size-md)) + 1rem);
    height: calc(var(--icon-size-current, var(--icon-size-md)) + 1rem);
  }

  mode-switch[size='1'],
  mode-switch[size='xs'] {
    --icon-size-current: var(--icon-size-xs);
  }
  mode-switch[size='2'],
  mode-switch[size='sm'] {
    --icon-size-current: var(--icon-size-sm);
  }
  mode-switch[size='3'],
  mode-switch[size='md'] {
    --icon-size-current: var(--icon-size-md);
  }
  mode-switch[size='4'],
  mode-switch[size='lg'] {
    --icon-size-current: var(--icon-size-lg);
  }
  mode-switch[size='5'],
  mode-switch[size='xl'] {
    --icon-size-current: var(--icon-size-xl);
  }
  mode-switch[size='6'],
  mode-switch[size='2xl'] {
    --icon-size-current: var(--icon-size-2xl);
  }
}

:host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-text-1);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  /* Drives the inner <t-icon>'s actual rendered size -- t-icon sizes itself
     via `width: 1em; height: 1em` on its own :host (t-icon.ts), i.e. off
     ITS font-size. t-icon.css's `t-icon[size=...] { font-size: ... }`
     rules are a LIGHT-DOM/global stylesheet -- they never reach a <t-icon>
     nested inside ANOTHER element's shadow root (this one), regardless of
     the `size` attribute mode-switch.ts still passes through to it (kept
     for correctness if t-icon is ever used standalone, but inert here).
     font-size is a normal inherited CSS property, though (unlike stylesheet
     rules, inheritance DOES cross a shadow boundary), so setting it here
     and letting it cascade down through :host button -> t-icon is what
     actually makes `size` take effect -- PROVIDED nothing in between resets
     it, see :host button's `font: inherit` below for why that's not a given. */
  font-size: var(--icon-size-current, var(--icon-size-md));
}

:host(:hover) {
  background: var(--color-action-secondary-bg-hover);
}

:host(:active) {
  background: var(--color-action-secondary-bg-active);
}

/* FOCUS: provisional — how we indicate focus is an open, undefined topic
   (see segmented.css). TODO(focus): define the system-wide treatment. */
:host(:focus-within) {
  outline: var(--size-stroke-thick) solid var(--color-border-brand);
  outline-offset: 2px;
}

:host button {
  /* `font: inherit` is load-bearing, not decorative: <button> is a UA form
     control and gets its own non-inherited default font (confirmed
     empirically in Chromium -- font-size: 13.3333px/Arial, unrelated to
     :host's font-size above) unless something re-establishes inheritance.
     Without this, the --icon-size-current -> :host font-size -> t-icon 1em
     chain above breaks silently AT this element: the icon renders at a
     constant ~13px regardless of `size` -- a real bug caught via real-
     Chromium measurement, not guessed. */
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  padding: 0;
  border: none;
  border-radius: inherit;
  cursor: inherit;
  background: transparent;
  color: inherit;
}

/**
 * Segmented control -- a group of mutually-exclusive options rendered as
 * connected segments (one selected). Built on a REAL radio group so it's
 * keyboard-accessible (arrow keys move between options) and announced as a
 * radio group, with zero JS:
 *
 *   <fieldset class="segmented">
 *     <legend>Density</legend>                      <!-- group label (visually hidden) -->
 *     <label><input type="radio" name="d" value="cozy"><span>Cozy</span></label>
 *     <label><input type="radio" name="d" value="auto" checked><span>Auto</span></label>
 *     <label><input type="radio" name="d" value="compact"><span>Compact</span></label>
 *   </fieldset>
 *
 * The real <input> is visually hidden but stays focusable + announced; the
 * <span> is the visible segment. `:has(input:checked)` lights the active one.
 * Lives in `@layer components` (a `.class` component like .btn-*, not classless
 * primo) -- the class is the opt-in that says "these radios are a segmented
 * control", and being a higher layer it overrides primo's default radio/label/
 * fieldset styling. Height + fill come from the same tokens as buttons, so a
 * segmented control lines up with sibling controls and resizes on .touch frames.
 */
@layer components {
  .segmented {
    display: inline-flex;
    /* Explicit row — primo's fieldset rule sets flex-direction: column (to stack
       option rows), which would otherwise leave the segments stacked vertically. */
    flex-direction: row;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }
  /* The group label is still needed for a11y (announces the radiogroup's
     purpose) but visually redundant next to the segments -- hide it accessibly. */
  .segmented > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .segmented label {
    display: inline-flex;
    margin: 0;
  }
  /* The visible segment. */
  .segmented label > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--height-btn);
    padding-inline: 1rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-1);
    border: var(--size-stroke-thick) solid var(--color-border-control);
    /* Halve the shared inner seams so adjacent borders don't double up; the end
       caps restore a full-width border below. */
    border-inline-width: 0.5px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .segmented label:first-of-type > span {
    border-start-start-radius: var(--size-radius-4);
    border-end-start-radius: var(--size-radius-4);
    border-inline-start-width: var(--size-stroke-thick);
  }
  .segmented label:last-of-type > span {
    border-start-end-radius: var(--size-radius-4);
    border-end-end-radius: var(--size-radius-4);
    border-inline-end-width: var(--size-stroke-thick);
  }
  /* The real radio: visually hidden, still focusable + announced. Uses logical
     sizing so it cleanly overrides primo's radio box (also logical). */
  .segmented input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    appearance: none;
  }
  /* Selected segment. */
  .segmented label:has(input:checked) > span {
    color: var(--color-action-primary-text);
    background: var(--color-action-primary-bg);
    border-color: var(--color-action-primary-bg);
  }
  /* Hover on an unselected, enabled segment. */
  .segmented label:has(input:not(:checked):not(:disabled)):hover > span {
    background: var(--color-action-secondary-bg-hover);
  }
  /* Keyboard focus ring on the focused segment (raised so the ring isn't clipped
     by neighbouring segments). 
     TODO determine how we indicate focus
     */
  .segmented label:has(input:focus-visible) > span {
    border-color: var(--color-border-brand);
    position: relative;
    z-index: 1;
  }
  /* Disabled segment. */
  .segmented label:has(input:disabled) > span {
    color: var(--color-disabled-text);
    background: var(--color-bg-disabled-input);
    cursor: not-allowed;
  }

  /* Icon-only variant — square cells for a compact view / tool switcher (List /
     Gallery / Calendar, a toolbar view toggle). Each segment holds a single
     <t-icon> instead of a text caption, so the segment goes square (its min
     inline size equals the block height) and the icon centres via the flex rule
     above. IMPORTANT: with no visible text, each <input> NEEDS an accessible
     name (`aria-label`) or the option is unlabelled to assistive tech. */
  .segmented label > span:has(> t-icon) {
    padding-inline: 0;
    min-inline-size: var(--height-btn);
  }
  .segmented t-icon {
    font-size: var(--icon-size-sm);
  }
}

/**
 * Shape utilities -- the control-shape axis documented in the demo's
 * Foundations -> Sizing -> "Shapes & sizes" page. Three named shapes plus
 * group caps, all overriding a component's default border-radius.
 *
 * These live in `@layer utilities` (declared LAST in components.css's
 * `@layer reset, semantic, ..., components, utilities;` order), so they always
 * win over the component defaults in `@layer components` regardless of source
 * order or selector specificity -- add `.pill` to any control and it becomes a
 * capsule, no `!important`. Same layer Tailwind's own utilities use; the class
 * names (`.pill`/`.square`/`.rounded`) don't collide with Tailwind's `rounded-*`.
 *
 * The base shapes map to the raw radius scale (not the semantic
 * `--size-radius-button`/`-input` aliases): a utility is an explicit
 * per-instance override, so it names an absolute shape, while the aliases are
 * the global default switch a component reads.
 *
 * Group caps come in two weights, matching the two group idioms:
 *   .rounded-l / .rounded-r  soft-capped ends -> a segmented switch (rounded rect)
 *   .pill-l   / .pill-r      pill-capped ends -> a joined capsule / pill group
 * Physical left/right, matching the class name. A logical start/end variant
 * (auto-flipping under RTL) is a deliberate future addition, not done here so
 * the names stay literally true today; settle it when i18n'd groups appear.
 */
@layer utilities {
  .square {
    border-radius: var(--size-radius-0);
  }
  .rounded {
    border-radius: var(--size-radius-4);
  }
  .pill {
    border-radius: var(--size-radius-full);
  }

  /* segmented switch: soft-capped ends, square inner seams */
  .rounded-l {
    border-radius: var(--size-radius-4) 0 0 var(--size-radius-4);
  }
  .rounded-r {
    border-radius: 0 var(--size-radius-4) var(--size-radius-4) 0;
  }

  /* joined pill / capsule group: pill-capped ends, square inner seams */
  .pill-l {
    border-radius: var(--size-radius-full) 0 0 var(--size-radius-full);
  }
  .pill-r {
    border-radius: 0 var(--size-radius-full) var(--size-radius-full) 0;
  }
}

/**
 * <t-icon> shell styles: FOUCE + default sizing. See docs/CUSTOM_ELEMENTS.md
 * ("FOUCE") and docs/ICON_SYSTEM_PLANNING.md. Every icon is the same 1em
 * box regardless of which icon it is, so this is one universal rule set,
 * not per-variant anchor pairs the way t-logo.css needs.
 */

@layer components {
  t-icon:not(:defined) {
    visibility: hidden;
  }

  /* font-size IS the icon size (1em box, set on :host in t-icon.ts) --
     --icon-size-md as the out-of-the-box default so a bare <t-icon> looks
     reasonable without a consumer having to size it explicitly; the
     .icon-* classes below override it using the same generated tokens
     tokens/icons.json already produces, not a second hand-written set
     (see icons.css's own "NEEDS REVIEW" comment for why that duplication
     is deliberately not repeated here). Color comes from --color-icon-*
     (colors.json), inherited via `currentColor` -- not set here, same
     split icons.css already documents.

     width/height: 1em duplicates t-icon.ts's own :host rule on purpose --
     :host only exists once Lit has upgraded the element and attached a
     shadow root, which hasn't happened yet during the t-icon:not(:defined)
     window above. Without an explicit box here, a bare <t-icon> has zero
     intrinsic size pre-upgrade (no light-DOM content of its own), so
     anything sizing off it -- a surrounding .btn-icon's flex layout, e.g.
     -- reflows/jumps the instant it upgrades. `visibility: hidden` above
     only hides paint, it doesn't reserve layout space by itself. */
  t-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: var(--icon-size-md);
  }

  .icon-xs {
    font-size: var(--icon-size-xs);
  }
  .icon-sm {
    font-size: var(--icon-size-sm);
  }
  .icon-md {
    font-size: var(--icon-size-md);
  }
  .icon-lg {
    font-size: var(--icon-size-lg);
  }
  .icon-xl {
    font-size: var(--icon-size-xl);
  }
  .icon-2xl {
    font-size: var(--icon-size-2xl);
  }

  /* size attribute -- additive to the .icon-* classes above, not a
     replacement: t-icon's other props (filled/muted/disabled) are all
     attributes, not classes, so this is the consistent, preferred way
     going forward, but the classes keep working unchanged for existing
     consumers. Accepts either a number (1-6, Radix-scale-flavored) or a
     T-shirt name (xs-2xl, same vocabulary as the classes/tokens) for the
     same six tiers -- purely a selector-matching choice below, both forms
     resolve to the exact same --icon-size-* token, neither is a "real"
     value the other converts from. These rules MUST live here (the
     light-DOM shell file), not inside t-icon.ts's shadow-scoped :host
     styles -- an outer-tree rule targeting the host always wins over a
     :host() rule for the same element/property regardless of specificity
     or layers (verified empirically earlier this session, the same reason
     t-logo's :host display rule beats its own shell's layered display
     rule but NOT the reverse for a rule defined the other way around); a
     :host([size="1"]) rule inside the shadow tree would silently lose to
     the bare `t-icon { font-size: ... }` rule above every time. */
  t-icon[size='1'],
  t-icon[size='xs'] {
    font-size: var(--icon-size-xs);
  }
  t-icon[size='2'],
  t-icon[size='sm'] {
    font-size: var(--icon-size-sm);
  }
  t-icon[size='3'],
  t-icon[size='md'] {
    font-size: var(--icon-size-md);
  }
  t-icon[size='4'],
  t-icon[size='lg'] {
    font-size: var(--icon-size-lg);
  }
  t-icon[size='5'],
  t-icon[size='xl'] {
    font-size: var(--icon-size-xl);
  }
  t-icon[size='6'],
  t-icon[size='2xl'] {
    font-size: var(--icon-size-2xl);
  }

  /* Icon stroke width (Lucide's 24-unit viewBox space, so it scales WITH the
     icon). --icon-stroke set on the host inherits into the shadow <svg>'s
     stroke-width (render() reads var(--icon-stroke, 2)). Balanced optical
     correction: lg+ icons drop to the dense stroke so a large glyph's heavier
     proportional weight evens out -- two buckets, not a per-size curve. Lives
     in this light-DOM shell for the same host-wins reason as the sizes above. */
  t-icon {
    --icon-stroke: var(--icon-stroke-default, 2);
  }
  .icon-lg,
  .icon-xl,
  .icon-2xl,
  t-icon[size='4'],
  t-icon[size='lg'],
  t-icon[size='5'],
  t-icon[size='xl'],
  t-icon[size='6'],
  t-icon[size='2xl'] {
    --icon-stroke: var(--icon-stroke-dense, 1.5);
  }
}

/**
 * <t-logo> shell styles: dark-mode custom-property wiring + FOUCE sizing.
 * Every file in src/css/elements/ is concatenated onto components.css by
 * build/build.js's generateComponentCSS() -- that's the convention, not an
 * explicit list to keep in sync (see that function's comment). Not loaded
 * standalone by consumers. Edit here, not in the built output.
 */

@layer components {
  /* t-logo dark mode. --logo-stroke-color is <t-logo>'s own public
     custom-property name (see src/elements/t-logo.ts) -- NOT the same
     variable as ThepiaSvgLogo.astro's --logo-stroke-color, which is a
     separate, older copy of this same artwork with its own self-contained
     dark-mode CSS; renaming would have been a breaking change for its
     existing consumers (thepia.com has its own ported copy, same name --
     see that file's header comment), so the two currently coexist under
     different names. See docs/CUSTOM_ELEMENTS.md's "Still open" TODO about
     generalizing this into one shared token instead.

     Set in light-DOM CSS, not inside t-logo's own shadow tree, so it
     reaches every <t-logo> instance purely through normal CSS
     custom-property inheritance across the shadow boundary -- a rule set
     directly on :host always wins over an inherited value, so this can't
     live in the element's own static styles (see the comment there). The
     .dark/.dark-theme/[data-theme="dark"] selector (deliberately unscoped,
     not :root-qualified) is the exact convention tokens.css already uses for
     --color-* tokens -- it applies wherever that class/attribute appears in
     the tree, not just on <html>, so a locally-forced dark/light wrapper
     (see LogoShowcase.astro's theme-chip demo) works the same way the real
     site-wide toggle does. Starlight resolves OS-vs-manual preference into
     that attribute on <html> via its own JS, so the media query below only
     exists for pages that don't have Starlight's toggle wiring at all (a
     bare <t-logo> embed with just tokens.css/components.css loaded); the
     :not([data-theme="light"]) guard keeps an explicit light choice from
     being clobbered by the OS still preferring dark. */
  :root {
    --logo-stroke-color: #000;
  }
  @media (prefers-color-scheme: dark) {
    :root:not(.light):not([data-theme='light']) {
      --logo-stroke-color: #fff;
    }
  }
  .dark,
  .dark-theme,
  [data-theme='dark'] {
    --logo-stroke-color: #fff;
  }
  .light,
  [data-theme='light'] {
    --logo-stroke-color: #000;
  }

  /* Custom elements FOUCE shells (docs/CUSTOM_ELEMENTS.md, "FOUCE" +
     "Concrete plan"). These load synchronously with tokens.css/components.css,
     well before primitivo's deferred/module <script> registers the elements,
     so the box is reserved from first paint. `width`/`aspect-ratio` stay
     active after the element upgrades too (not gated to :not(:defined)) so
     there's one sizing source, not two that could drift out of sync.
     Values here mirror ThepiaSvgLogo.astro's `widths` map.

     overflow: hidden makes the aspect-ratio box authoritative regardless of
     what the shadow content wants -- matches the same rule (and the same
     reasoning) on t-logo's own :host in src/elements/t-logo.ts, kept here
     too as the shell's independent guarantee once it's loaded, the same
     "default + reinforced by shell when present" pattern as `display`. */
  t-logo:not(:defined) {
    visibility: hidden;
  }

  t-logo {
    display: inline-block;
    overflow: hidden;
  }

  t-logo[variant='tonly'] {
    aspect-ratio: 1 / 1;
  }

  t-logo:not([variant='tonly']) {
    aspect-ratio: 4.968 / 1;
  }

  t-logo[size='sm']:not([variant='tonly']) {
    width: 10rem;
  }
  t-logo:is(:not([size]), [size='md']):not([variant='tonly']) {
    width: 15rem;
  }
  t-logo[size='lg']:not([variant='tonly']) {
    width: 20rem;
  }
  t-logo[size='xl']:not([variant='tonly']) {
    width: 30rem;
  }

  t-logo[variant='tonly'][size='sm'] {
    width: 2rem;
  }
  t-logo[variant='tonly']:is(:not([size]), [size='md']) {
    width: 3rem;
  }
  t-logo[variant='tonly'][size='lg'] {
    width: 4rem;
  }
  t-logo[variant='tonly'][size='xl'] {
    width: 6rem;
  }
}

/**
 * Primo — scoped, classless semantic styling for @thepia/branding.
 *
 * Ships ONLY as part of the combined `@thepia/branding/css/primitivo` bundle
 * (tokens + components + primo). It is not a standalone output or package
 * export — the source modules in this folder are concatenated into primitivo
 * by build/build.js's concatPrimoCSS(); there is no dist/css/primo.css. Load
 * order inside primitivo is tokens first, since every rule reads the --color-
 * and --size- custom properties. Think PicoCSS, but scoped to a DOM subtree (a
 * <form>, <dialog>, <menu>, or <t-primo>) instead of the whole document. That
 * scoping is exactly why it can ride along in the default primitivo bundle
 * without fighting Tailwind (thepia.com) or Radix — it only ever styles inside
 * a region, never bare page markup.
 *
 * ── FILE LAYOUT ──────────────────────────────────────────────────────────
 * This folder is split by ELEMENT CATEGORY, PicoCSS's own axis (content /
 * forms / tables / …), NOT by context — a menu, form, and dialog all get the
 * SAME look ("one tier"). Any *.css file dropped in src/css/primo/ is picked up
 * automatically and concatenated by build/build.js's concatPrimoCSS(), the
 * same convention-over-config way src/css/elements/ feeds components.css. Each
 * file is a self-contained `@layer semantic { … }` block; CSS merges repeated
 * same-name layers, so plain concatenation is valid. `_base.css` sorts first
 * (leading underscore), so its `@layer` order line below leads the output.
 *   _base.css     this file — layer order, <t-primo>, region-container resets
 *   button.css    <button> / [role=button]
 *   forms.css     inputs, selects, textareas, checkboxes, labels, fieldsets
 *   prose.css   links, small, hr (grow here: h1–h6, p, lists, blockquote…)
 *   (add tables.css, etc. as coverage grows — no build change needed)
 *
 * ── THE MODEL ────────────────────────────────────────────────────────────
 *   Everything is scoped to a REGION ROOT (opt-in by container): plain markup
 *   inside a <form>, <dialog>, <menu>, or the
 *   <t-primo> marker element is branded automatically, with NO classes — and
 *   primo touches NOTHING outside a region. There is no document-wide styling;
 *   a standalone control opts in with a class (.btn-*, .input-brand) or a
 *   <t-primo> wrapper. These containers are already self-delimiting, so they
 *   need no wrapper of their own.
 *
 *   REGIONS ARE ELEMENTS/CLASSES, NEVER ARIA ROLES. The region root set is
 *   `form, dialog, menu, t-primo` (plus `.prose` for buttons, a reading-content
 *   container). <menu> is a REQUIRED container element — we do NOT switch on
 *   `[role="menu"]` / `[role="menubar"]` to decide default primitivo styling.
 *   Role selectors appear only as styling TARGETS inside a region (e.g. a
 *   `[role="button"]` styled like a <button>), never as the region container.
 *
 * ── ESCAPE HATCH — `.noprimo` does double duty ───────────────────────────
 *     • on a region root → opts that whole region out
 *     • on any element   → carves a donut hole (it + its subtree excluded), so
 *                          an embedded third-party widget keeps its own styling.
 *   Expressed as the reusable guard `:not(:where(.noprimo, .noprimo *))` on
 *   every rule in every module.
 *
 * ── WHY IT NEVER CLOBBERS APP CSS ─────────────────────────────────────────
 *     • `@layer semantic` sits below `components`, Tailwind's layers, and any
 *       unlayered app CSS — layer order alone means all of those win.
 *     • Structural selectors are wrapped in `:where()` (specificity 0,0,0), so
 *       even a single class (.btn-solid, .input-brand, a Tailwind utility)
 *       outranks the whole layer. It loses gracefully by design.
 *
 * ── BROWSER SUPPORT ───────────────────────────────────────────────────────
 *   Intentionally NO `@scope` — only `:where()`, complex-selector `:not()`, and
 *   `@layer`, all Baseline 2022 (Safari 15.4+).
 *
 *   DECISION: do NOT adopt `@scope` until 2028. It IS the clean fix for the
 *   repeated region-root prefix + the per-rule `.noprimo` guard (one root, native
 *   donut via `to (.noprimo)`), but it is Baseline 2024 (Safari 17.4 / Chrome 118
 *   / Firefox 128) and judged too new for primo's floor. The verbosity of the
 *   repeated `:where(form, dialog, menu, t-primo)` + `:not(:where(.noprimo, …))`
 *   is a deliberate, accepted cost until then (the repeats also gzip away). When
 *   we revisit (2028+), the rule BODIES port unchanged — only the scoping wrapper
 *   changes.
 *
 * The identical `@layer` order line below is also declared in components.css;
 * duplicated on purpose so whichever bundle loads first pins a consistent order
 * (same rationale as src/react/radix-themes-layer.css).
 */
@layer reset, base, semantic, thepia-radix-themes, theme, components, utilities;

@layer semantic {
  /* The <t-primo> marker generates no box of its own — it is a pure styling
     scope, so wrapping content in it never disturbs the surrounding layout. */
  t-primo {
    display: contents;
  }

  /* <menu> renders as a list by default — normalize it to a bare region so its
     interactive content (links, buttons, toggles) lays out cleanly. */
  :where(menu):not(:where(.noprimo, .noprimo *)) {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

/**
 * Primo — button module. Scoped like every other module: <button> and
 * [role="button"] are styled ONLY inside a region root (form / dialog / menu /
 * t-primo / .prose), never document-wide. A standalone button outside a region
 * opts in with a .btn-* class or a <t-primo> wrapper.
 *
 * Classless baseline = the NEUTRAL GRAY OUTLINE (same look as a bare `.btn-outline`
 * and the same knobs), so a classless button reads as a quiet, unemphasized control
 * rather than brand emphasis. `.noprimo` donut guard as everywhere. See _base.css.
 */
@layer semantic {
  :where(form, dialog, menu, t-primo, .prose)
    :where(button, [role="button"]):not(:where(.noprimo, .noprimo *)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.5rem;
    /* PUBLIC container knobs: a region (or any wrapper) can set --btn-h / --btn-radius once and every
       classless button inside inherits it. */
    min-height: var(--btn-h, var(--height-btn));
    font-family: inherit;
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: 1.25rem;
    border-radius: var(--btn-radius, var(--size-radius-button));
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    /* neutral outline */
    background: transparent;
    color: var(--color-text-1);
    border: var(--size-stroke-thick) solid var(--color-border-strong);
  }
  :where(form, dialog, menu, t-primo, .prose)
    :where(button, [role="button"]):not(:where(.noprimo, .noprimo *)):hover:not(:disabled) {
    background: var(--color-action-secondary-bg-hover);
  }
  :where(form, dialog, menu, t-primo, .prose)
    :where(button, [role="button"]):not(:where(.noprimo, .noprimo *)):active:not(:disabled) {
    background: var(--color-action-secondary-bg-active);
  }
  :where(form, dialog, menu, t-primo, .prose)
    :where(button, [role="button"]):not(:where(.noprimo, .noprimo *)):focus-visible {
    /* FOCUS: provisional — how we indicate focus is an open, undefined topic
       (see segmented.css). TODO(focus): define the system-wide treatment. */
    outline: var(--size-stroke-thick) solid var(--color-border-brand);
    outline-offset: 2px;
    border-color: transparent;
  }
  :where(form, dialog, menu, t-primo, .prose)
    :where(button, [role="button"]):not(:where(.noprimo, .noprimo *)):disabled {
    background: transparent;
    color: var(--color-disabled-text);
    border-color: var(--color-interactive-disabled);
    cursor: not-allowed;
  }
}

@layer semantic {
  /* Checkbox & radio — custom-drawn (NOT native): a bordered box that FILLS brand
     on :checked, with a white glyph on top — an angled two-stroke checkmark for the
     checkbox, a dot for the radio (the familiar look). `appearance: none` gives us
     the box; the glyph is a ::before drawn on the REAL input (no hidden-input /
     extra span — primo stays classless). Sized off --height-glyph (16/22px) so it
     resizes on .touch frames; border-box keeps the total exactly one glyph.
     `[role="switch"]` / `[switch]` is a toggle, styled separately below. */
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch]), input[type="radio"]):not(:where(.noprimo, .noprimo *)) {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-grid;
    place-content: center;
    inline-size: var(--height-glyph);
    block-size: var(--height-glyph);
    margin: 0;
    flex: none;
    vertical-align: -0.15em;
    background: var(--color-bg-1);
    border: var(--size-stroke-thick) solid var(--color-border-control);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  /* Checkbox: a crisp rounded square. */
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)) {
    border-radius: var(--size-radius-2);
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="radio"]):not(:where(.noprimo, .noprimo *)) {
    border-radius: var(--size-radius-full);
  }

  /* Checked / indeterminate → FILL the box brand; the white glyph rides on top. */
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch]), input[type="radio"]):not(:where(.noprimo, .noprimo *)):checked,
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)):indeterminate {
    background: var(--color-action-primary-bg);
    border-color: var(--color-action-primary-bg);
  }

  /* Checkbox glyph — an angled two-stroke checkmark (the border trick): a box with
     only right + bottom borders, rotated 45deg. White on the brand fill, hidden
     (scaled to 0) until checked; the translateY nudge optically centres the tick.
     Definite sizes — a % collapses to 0 inside the content-sized grid track. */
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch])):not(:where(.noprimo, .noprimo *))::before {
    content: "";
    inline-size: calc(var(--height-glyph) * 0.26);
    block-size: calc(var(--height-glyph) * 0.48);
    border: solid var(--color-action-primary-text);
    border-width: 0 2px 2px 0;
    transform: translateY(calc(var(--height-glyph) * -0.05)) rotate(45deg) scale(0);
    transition: transform 0.1s ease-in-out;
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)):checked::before {
    transform: translateY(calc(var(--height-glyph) * -0.05)) rotate(45deg) scale(1);
  }
  /* Indeterminate → a flat white bar instead of the tick (mixed state). */
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)):indeterminate::before {
    inline-size: calc(var(--height-glyph) * 0.5);
    block-size: 2px;
    border: none;
    background: var(--color-action-primary-text);
    transform: none;
  }

  /* Radio glyph — a white dot, hidden until checked. */
  :where(form, dialog, menu, t-primo)
    :where(input[type="radio"]):not(:where(.noprimo, .noprimo *))::before {
    content: "";
    inline-size: calc(var(--height-glyph) * 0.4);
    block-size: calc(var(--height-glyph) * 0.4);
    border-radius: var(--size-radius-full);
    background: var(--color-action-primary-text);
    transform: scale(0);
    transition: transform 0.1s ease-in-out;
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="radio"]):not(:where(.noprimo, .noprimo *)):checked::before {
    transform: scale(1);
  }

  /* States. Hover darkens the border only while UNCHECKED (a checked box is brand). */
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch]), input[type="radio"]):not(:where(.noprimo, .noprimo *)):not(:checked, :indeterminate, :disabled):hover {
    border-color: var(--color-border-strong);
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch]), input[type="radio"]):not(:where(.noprimo, .noprimo *)):focus-visible {
    /* FOCUS: provisional — how we indicate focus is an open, undefined topic
       (see segmented.css). TODO(focus): define the system-wide treatment. */
    outline: var(--size-stroke-thick) solid var(--color-border-brand);
    outline-offset: 2px;
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch]), input[type="radio"]):not(:where(.noprimo, .noprimo *)):disabled {
    background: var(--color-bg-disabled-input);
    border-color: var(--color-border-control);
    cursor: not-allowed;
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch]), input[type="radio"]):not(:where(.noprimo, .noprimo *)):disabled:checked,
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:not([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)):disabled:indeterminate {
    background: var(--color-bg-disabled-primary);
    border-color: var(--color-bg-disabled-primary);
  }

  /* Switch — a real toggle (pill track + sliding thumb), visually distinct from a
     checkbox (a `role="switch"` checkbox otherwise renders as a check box). Applies
     to EITHER the ARIA `role="switch"` (cross-browser, announces as a switch) OR the
     modern `switch` attribute (`<input type="checkbox" switch>`). `appearance: none`
     draws OUR brand toggle in every engine — including overriding Safari 17.4+'s
     native `<input switch>` — so the control looks the same everywhere rather than
     native-in-Safari / custom-elsewhere. The thumb slides via margin-inline-start:
     auto, so RTL is automatic. For best a11y use BOTH attrs: `role="switch" switch`. */
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:where([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)) {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    inline-size: calc(var(--height-glyph) * 1.75);
    block-size: var(--height-glyph);
    padding: 2px;
    margin: 0;
    flex: none;
    vertical-align: -0.25em;
    background: var(--color-bg-1);
    border: var(--size-stroke-thin) solid var(--color-border-control);
    border-radius: var(--size-radius-full);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  /* Thumb — an inset knob that never reaches the border. Grey on the off track,
     white once the track fills brand. */
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:where([role="switch"], [switch])):not(:where(.noprimo, .noprimo *))::before {
    content: "";
    block-size: 100%;
    aspect-ratio: 1;
    background: var(--color-border-control);
    border-radius: var(--size-radius-full);
    transition: margin-inline-start 0.15s ease, background-color 0.15s ease;
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:where([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)):checked {
    background: var(--color-action-primary-bg);
    border-color: var(--color-action-primary-bg);
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:where([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)):checked::before {
    margin-inline-start: auto;
    background: var(--color-bg-1);
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:where([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)):focus-visible {
    /* FOCUS: provisional — how we indicate focus is an open, undefined topic
       (see segmented.css). TODO(focus): define the system-wide treatment. */
    outline: var(--size-stroke-thick) solid var(--color-border-brand);
    outline-offset: 2px;
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="checkbox"]:where([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)):disabled {
    background: var(--color-bg-disabled-input);
    cursor: not-allowed;
  }

  /* Respect reduced-motion: drop the scale/slide animation (covers all three). */
  @media (prefers-reduced-motion: reduce) {
    :where(form, dialog, menu, t-primo)
      :where(input[type="checkbox"], input[type="radio"]):not(:where(.noprimo, .noprimo *)),
    :where(form, dialog, menu, t-primo)
      :where(input[type="checkbox"], input[type="radio"]):not(:where(.noprimo, .noprimo *))::before {
      transition: none;
    }
  }

  /* Forced-colors / Windows High Contrast: background & box-shadow are stripped, so
     the fill uses Highlight and the white glyphs use HighlightText (both survive),
     keeping the checked/on state distinguishable. Borders are forced visible by the
     UA, so the bordered box always reads. */
  @media (forced-colors: active) {
    :where(form, dialog, menu, t-primo)
      :where(input[type="checkbox"]:not([role="switch"], [switch]), input[type="radio"]):not(:where(.noprimo, .noprimo *)):checked,
    :where(form, dialog, menu, t-primo)
      :where(input[type="checkbox"]:not([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)):indeterminate,
    :where(form, dialog, menu, t-primo)
      :where(input[type="checkbox"]:where([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)):checked {
      background: Highlight;
      border-color: Highlight;
    }
    /* Checkmark strokes are a border. */
    :where(form, dialog, menu, t-primo)
      :where(input[type="checkbox"]:not([role="switch"], [switch])):not(:where(.noprimo, .noprimo *))::before {
      border-color: HighlightText;
    }
    /* Radio dot, indeterminate bar, and switch thumb are backgrounds. */
    :where(form, dialog, menu, t-primo)
      :where(input[type="radio"]):not(:where(.noprimo, .noprimo *))::before,
    :where(form, dialog, menu, t-primo)
      :where(input[type="checkbox"]:not([role="switch"], [switch])):not(:where(.noprimo, .noprimo *)):indeterminate::before,
    :where(form, dialog, menu, t-primo)
      :where(input[type="checkbox"]:where([role="switch"], [switch])):not(:where(.noprimo, .noprimo *))::before {
      background: HighlightText;
    }
  }
}

/**
 * Primo — forms module. Every rule is SCOPED: it only matches inside a region
 * root (form / dialog / menu / t-primo), never
 * document-wide. The root list is repeated per rule because CSS has no selector
 * variable before @scope; the `:not(:where(.noprimo, .noprimo *))` guard on the
 * target is the `.noprimo` donut opt-out. Mirrors .input-brand so a classless
 * field and a .input-brand field share one appearance. See _base.css.
 */
@layer semantic {
  /* ── Text fields, selects, textareas ──────────────────────────────────────
     Classless and fully token-based. Covers every text-entry input type (text,
     email, password, search, url, tel, number, date / time / month / week / …)
     plus <select> and <textarea>. Excluded: checkbox / radio (their own control
     styling, checkbox.css) and range / color / file (special native widgets —
     the slider is a separate component). The `NOT-A-TEXT-FIELD` exclusion is
     repeated on every rule (no selector variable before @scope, deferred to 2028
     — see _base.css). Every state below reads a design token. */
  :where(form, dialog, menu, t-primo)
    :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):not(:where(.noprimo, .noprimo *)) {
    display: block;
    inline-size: 100%;
    padding: 0.75rem 1rem;
    font: inherit;
    font-size: var(--font-size-base);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: var(--size-stroke-thick) solid var(--color-border-control);
    border-radius: var(--size-radius-input);
    /* Specific properties (not `all`) so layout/size changes don't animate. */
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }
  /* Number fields — drop the native spin buttons. They clutter the field, invite
     mis-clicks, and don't match the rest of the control set; the value is still
     typeable and keyboard-steppable (↑/↓). `textfield` covers Firefox; the
     ::-webkit-*-spin-button reset covers Safari / Chromium. */
  :where(form, dialog, menu, t-primo)
    :where(input[type="number"]):not(:where(.noprimo, .noprimo *)) {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="number"]):not(:where(.noprimo, .noprimo *))::-webkit-outer-spin-button,
  :where(form, dialog, menu, t-primo)
    :where(input[type="number"]):not(:where(.noprimo, .noprimo *))::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* Single-line fields take a fixed, platform-context height (desktop/touch,
     src/css/elements/component-heights.css); vertical padding drops to 0 so the
     height is authoritative. textarea is excluded so it keeps padding-based,
     multi-line growth from the rule above. */
  :where(form, dialog, menu, t-primo)
    :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select):not(:where(.noprimo, .noprimo *)) {
    block-size: var(--height-field);
    padding-block: 0;
  }
  /* Hover — only while editable (not disabled / read-only). */
  :where(form, dialog, menu, t-primo)
    :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):not(:where(.noprimo, .noprimo *)):not(:disabled, [readonly]):hover {
    border-color: var(--color-border-strong);
  }
  /* Focus — brand border + a focus ring (--shadow-input-focus).
     FOCUS: provisional — how we indicate focus is an open, undefined topic
     (see segmented.css). TODO(focus): define the system-wide treatment; the
     box-shadow ring here is not decided. */
  :where(form, dialog, menu, t-primo)
    :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):not(:where(.noprimo, .noprimo *)):focus {
    outline: none;
    border-color: var(--color-border-brand);
    box-shadow: var(--shadow-input-focus);
  }
  /* Placeholder. */
  :where(form, dialog, menu, t-primo)
    :where(input, select, textarea):not(:where(.noprimo, .noprimo *))::placeholder {
    color: var(--color-text-placeholder);
  }
  /* Read-only — a flat, muted field (still focusable so its text can be selected). */
  :where(form, dialog, menu, t-primo)
    :where(input[readonly], textarea[readonly]):not(:where(.noprimo, .noprimo *)) {
    border-color: var(--color-border-subtle);
    cursor: default;
  }
  /* Disabled. */
  :where(form, dialog, menu, t-primo)
    :where(input, select, textarea):not(:where(.noprimo, .noprimo *)):disabled {
    background: var(--color-bg-disabled-input);
    color: var(--color-disabled-text);
    cursor: not-allowed;
  }
  /* Invalid — `aria-invalid="true"` (JS-driven) OR `:user-invalid` (native
     constraint validation, only after the user has interacted, so errors don't
     shout on first paint). Error border, and an error-tinted focus ring. Declared
     after focus so it wins the 0,0,0 source-order tie. */
  :where(form, dialog, menu, t-primo)
    :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):where([aria-invalid="true"], :user-invalid):not(:where(.noprimo, .noprimo *)) {
    border-color: var(--color-border-error);
  }
  /* FOCUS: provisional (see segmented.css). TODO(focus): the error focus ring is not decided. */
  :where(form, dialog, menu, t-primo)
    :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):where([aria-invalid="true"], :user-invalid):not(:where(.noprimo, .noprimo *)):focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-border-error) 25%, transparent);
  }
  /* Valid — OPT-IN via `aria-invalid="false"` (deliberately NOT `:user-valid`,
     which would green every filled field). Success border + ring on focus. */
  :where(form, dialog, menu, t-primo)
    :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):where([aria-invalid="false"]):not(:where(.noprimo, .noprimo *)) {
    border-color: var(--color-border-success);
  }
  /* FOCUS: provisional (see segmented.css). TODO(focus): the success focus ring is not decided. */
  :where(form, dialog, menu, t-primo)
    :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):where([aria-invalid="false"]):not(:where(.noprimo, .noprimo *)):focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-border-success) 25%, transparent);
  }

  /* Labels. The standard field paradigm is a label that WRAPS its control:
     <label>Full name <input></label>. So the label IS the field group — a flex
     column that stacks the caption directly above its control. Two spacing jobs,
     one principle (proximity): a TIGHT gap ties the caption to its own control
     (they read as one unit), a LARGER bottom margin separates one field group
     from the next. intra (space-1) << inter (space-4). A tight line-height keeps
     the caption box hugging its text so the intra gap is exactly the token, not
     token + inherited leading. */
  :where(form, dialog, menu, t-primo)
    :where(label):not(:where(.noprimo, .noprimo *)) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--size-space-1);
    margin-bottom: var(--size-space-4);
    font-size: var(--font-size-sm);
    line-height: 1.3;
    color: var(--color-text-primary);
  }
  /* A label wrapping a checkbox/radio/switch is an option ROW, not a stacked
     field: control + caption on one line, vertically centred. Tighter bottom
     margin so a list of options stays compact. (Inherits display:flex above;
     just flips the axis.) `:has()` is scoped inside `:where()` so the rule stays
     0,0,0 and still loses to any class. */
  :where(form, dialog, menu, t-primo)
    :where(label:has(> input[type="checkbox"], > input[type="radio"])):not(:where(.noprimo, .noprimo *)) {
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    margin-bottom: var(--size-space-2);
    cursor: pointer;
  }

  /* Grouping. */
  :where(form, dialog, menu, t-primo)
    :where(fieldset):not(:where(.noprimo, .noprimo *)) {
    display: flex;
    flex-direction: column;  
    border: var(--size-stroke-thin) solid var(--color-border-control);
    border-radius: var(--size-radius-input);
    padding: 0.9rem 1rem;
    margin: 0 0 1rem;
  }
  :where(form, dialog, menu, t-primo)
    :where(legend):not(:where(.noprimo, .noprimo *)) {
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0 0.4rem;
    color: var(--color-brand-primary);
  }

    /* ============================================================ *
   *  UI regions — controls & affordances                         *
   *  (form / dialog / menu / t-primo)      *
   * ============================================================ */

  /* Control links & menu items — a link here is a control ("forgot password?",
     a menu item), not prose. Brand-tinted, tighter underline offset than prose. */
  :where(form, dialog, menu, t-primo)
    :where(a, [role="menuitem"]):not(:where(.noprimo, .noprimo *)) {
    color: var(--color-brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  :where(form, dialog, menu, t-primo)
    :where(a, [role="menuitem"]):not(:where(.noprimo, .noprimo *)):hover {
    color: var(--color-brand-primaryHover);
  }

  /* Field / helper text. */
  :where(form, dialog, menu, t-primo)
    :where(small):not(:where(.noprimo, .noprimo *)) {
    color: var(--color-text-placeholder);
    font-size: 0.8rem;
  }

  /* Separators — menu dividers, form section rules. */
  :where(form, dialog, menu, t-primo)
    :where(hr, [role="separator"]):not(:where(.noprimo, .noprimo *)) {
    border: none;
    border-top: var(--size-stroke-thin) solid var(--color-border-separator);
    margin: 0.5rem 0;
  }

}

/**
 * Primo — content module. Text-level semantics, split across TWO distinct
 * concerns that share this file (and the `.noprimo` donut guard) but nothing
 * else:
 *
 *  `.prose` — a passage of READING content (article / body text): paragraphs,
 *     inline links within sentences, inline icons, fine print, thematic breaks
 *     (and, later, headings / lists / blockquote / tables). NOT UI, and NOT a
 *     primo region root. An explicit, per-passage opt-in. A form may CONTAIN a
 *     `.prose` block, but a form's own content is not prose by default -- so
 *     prose rules are scoped to `.prose` ONLY, never folded into the UI list.
 *
 * Prose colours flow through slots (--prose-fg / -muted / -link / ...) defined on
 * the `.prose` root, so a [data-palette] on the .prose parent re-tints the whole
 * passage at once -- the same frame model as [data-theme] (light/dark) and
 * [data-platform] (desktop/touch). UI-region rules do NOT borrow those slots.
 */
@layer semantic {
  /* ============================================================ *
   *  Prose — reading content (.prose only, never a UI region)    *
   * ============================================================ */

  /* Prose region + colour slots. Defaults resolve to the semantic text/brand
     tokens; a [data-palette] variant repoints the slots. */
  .prose {
    --prose-fg: var(--color-text-1);
    --prose-muted: var(--color-text-secondary);
    --prose-link: var(--color-brand-primary);
    --prose-link-hover: var(--color-brand-primaryHover);
    --prose-underline-offset: 4px;
    color: var(--prose-fg);
  }
  .prose[data-palette="neutral"] {
    --prose-link: var(--color-text-1);
    --prose-link-hover: var(--color-text-secondary);
  }
  .prose[data-palette="brand"] {
    --prose-fg: var(--color-text-brand);
  }
  .prose[data-palette="accent"] {
    --prose-link: var(--color-accent);
    --prose-link-hover: var(--color-accent-hover);
  }
  .prose[data-palette="inverse"] {
    --prose-fg: var(--color-text-inverse);
    --prose-muted: var(--color-text-inverse);
    --prose-link: var(--color-text-inverse);
    --prose-link-hover: var(--color-text-inverse);
  }

  /* Paragraphs. */
  .prose :where(p):not(:where(.noprimo, .noprimo *)) {
    margin: 0 0 0.75em;
    line-height: 1.6;
  }
  .prose :where(p):last-child:not(:where(.noprimo, .noprimo *)) {
    margin-bottom: 0;
  }

  /* Prose links — inline reading affordances within flowing text, palette-tinted
     through the slots. */
  .prose :where(a):not(:where(.noprimo, .noprimo *)) {
    color: var(--prose-link);
    text-decoration: underline;
    text-underline-offset: var(--prose-underline-offset);
  }
  .prose :where(a):not(:where(.noprimo, .noprimo *)):hover {
    color: var(--prose-link-hover);
  }

  /* Inline <t-icon> inside a prose link. Sized to the text (1em) and nudged onto
     the cap height so it rides the label baseline. The gap sits on the edge that
     faces the label: a leading icon (first child) gets a trailing gap, a trailing
     icon (last child) gets a leading gap. When the label is an unwrapped text
     node the icon is BOTH first and last child, so both rules fire and the gap is
     symmetric -- correct in either position. */
  .prose :where(a):not(:where(.noprimo, .noprimo *)) t-icon {
    font-size: 1em;
    vertical-align: middle;
  }
  .prose :where(a):not(:where(.noprimo, .noprimo *)) t-icon:first-child {
    margin-inline-end: var(--size-space-1);
  }
  .prose :where(a):not(:where(.noprimo, .noprimo *)) t-icon:last-child {
    margin-inline-start: var(--size-space-1);
  }

  /* Fine print. */
  .prose :where(small):not(:where(.noprimo, .noprimo *)) {
    color: var(--prose-muted);
    font-size: 0.8rem;
  }

  /* Thematic break. */
  .prose :where(hr):not(:where(.noprimo, .noprimo *)) {
    border: none;
    border-top: var(--size-stroke-thin) solid var(--color-border-separator);
    margin: 0.5rem 0;
  }
}

/**
 * Primo — range (slider) module. Scoped like the rest of primo: matches only
 * inside a region root (form / dialog / menu / t-primo), never document-wide,
 * with the `:not(:where(.noprimo, .noprimo *))` donut opt-out. See _base.css.
 *
 * Fully custom-drawn cross-engine (like checkbox/switch), so the slider looks
 * the SAME everywhere rather than native-in-one-engine / custom-in-another. We
 * draw it via the vendor pseudo-elements, doubled for the two engines:
 *   WebKit/Blink: ::-webkit-slider-runnable-track + ::-webkit-slider-thumb
 *   Firefox:      ::-moz-range-track + ::-moz-range-progress + ::-moz-range-thumb
 * Firefox fills the lower portion natively (::-moz-range-progress); WebKit has
 * no such pseudo, so the fill is the classic box-shadow trick: a huge spread
 * shadow on the thumb painting everything to its left, CLIPPED by overflow:
 * hidden on the track. That clip forbids a protruding thumb, so the geometry is
 * a CAPSULE track with an INSET thumb — the same shape language as the switch
 * (checkbox.css). Knobs consumed: --track-bg (rail), --track-on-bg (fill),
 * --track-thumb-bg (thumb), --track-thumb-border (ring). Styled datalist ticks
 * (--track-tick) stay in the exported t-slider enhancer; native <datalist> tick
 * marks still render underneath.
 */
@layer semantic {
  :where(form, dialog, menu, t-primo)
    :where(input[type="range"]):not(:where(.noprimo, .noprimo *)) {
    /* Resolve the public knobs into locals the pseudo-elements inherit. The rail
       is a pill sized off --height-glyph (16/22px), so it grows on a .touch
       frame; the thumb is inset ~3px each side, never reaching the rail edge. */
    --_rail: var(--height-glyph);
    --_thumb: var(--height-glyph);
    --_off-bg: transparent;
    --_off-border: var(--track-bg, var(--color-border-track));
    --_on: var(--track-on-bg, var(--color-palette-thepia-track));
    --_thumb-bg: var(--track-thumb-bg, var(--color-bg-1));
    --_thumb-ring: var(--track-thumb-border, var(--color-palette-thepia-track));
    --_track-radius: var(--size-radius-full);
    --_thumb-radius: var(--size-radius-full);
    --_stroke: var(--size-stroke-thick);

    appearance: none;
    -webkit-appearance: none;
    inline-size: 100%;
    block-size: var(--_rail);
    margin: 0;
    padding: 0;
    background: transparent;
    /* Rounded so the :focus-visible outline traces the capsule, not a rectangle. */
    border-radius: var(--_track-radius);
    cursor: pointer;
    vertical-align: middle;
  }

  /* ── WebKit / Blink ──────────────────────────────────────────────────────
     The runnable track is the pill (off-colour rail); overflow:hidden clips the
     thumb's fill shadow to the rail box (which is why the thumb must fit inside
     the rail, not protrude). */
  :where(form, dialog, menu, t-primo)
    :where(input[type="range"]):not(:where(.noprimo, .noprimo *))::-webkit-slider-runnable-track {
    block-size: var(--_rail);
    border-radius: var(--_track-radius);
    background: var(--_off-bg);
    /* Unfilled rail = an outline, not a filled groove: a full-height capsule with
       a stroke-thick inset ring (same weight as the thumb ring), transparent
       interior. The brand fill paints ABOVE this ring on the left, so it covers
       the outline there (flush) and only the unfilled portion shows the ring. */
    box-shadow: inset 0 0 0 var(--_stroke) var(--_off-border);
    overflow: hidden;
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="range"]):not(:where(.noprimo, .noprimo *))::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    block-size: var(--_thumb);
    inline-size: var(--_thumb);
    /* Centre the inset thumb vertically within the taller rail. */
    margin-block-start: calc((var(--_rail) - var(--_thumb)) / 2);
    border-radius: var(--_thumb-radius);
    background: var(--_thumb-bg);
    border: var(--_stroke) solid var(--_thumb-ring);
    box-sizing: border-box;
    /* The fill: paint everything to the LEFT of the thumb in --_on. The track's
       overflow:hidden clips this huge shadow to the rail, so the filled portion
       matches the rail thickness exactly. The extra `- var(--_thumb) / 2` in the
       offset ends the fill at the thumb's CENTRE (the value point) rather than
       its right edge — otherwise the fill overruns the thumb by half its width,
       burying the brand ring under the brand fill. Firefox's ::-moz-range-progress
       already stops at the centre, so this keeps both engines aligned. */
    box-shadow: calc(-100vw - var(--_thumb) / 2) 0 0 100vw var(--_on);
  }

  /* ── Firefox ─────────────────────────────────────────────────────────────
     Native progress pseudo does the fill; no shadow/clip trick needed. */
  :where(form, dialog, menu, t-primo)
    :where(input[type="range"]):not(:where(.noprimo, .noprimo *))::-moz-range-track {
    block-size: var(--_rail);
    border-radius: var(--_track-radius);
    background: var(--_off-bg);
    /* Unfilled rail = an outline, not a filled groove: a full-height capsule with
       a stroke-thick inset ring (same weight as the thumb ring), transparent
       interior. The brand fill paints ABOVE this ring on the left, so it covers
       the outline there (flush) and only the unfilled portion shows the ring. */
    box-shadow: inset 0 0 0 var(--_stroke) var(--_off-border);
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="range"]):not(:where(.noprimo, .noprimo *))::-moz-range-progress {
    block-size: var(--_rail);
    border-radius: var(--_track-radius);
    background: var(--_on);
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="range"]):not(:where(.noprimo, .noprimo *))::-moz-range-thumb {
    block-size: var(--_thumb);
    inline-size: var(--_thumb);
    border-radius: var(--_thumb-radius);
    background: var(--_thumb-bg);
    border: var(--_stroke) solid var(--_thumb-ring);
    box-sizing: border-box;
  }

  /* ── Focus ───────────────────────────────────────────────────────────────
     Ring the whole control, NOT the thumb. WebKit's ::-webkit-slider-runnable-track
     needs overflow:hidden for the fill trick, which CLIPS any outline on the thumb
     (and the full-height thumb sits at the rail edge, so its ring is always outside
     the clip). The host <input> is outside that clip, so its outline is never cut
     off and reads the same in both engines. FOCUS is still provisional system-wide
     (see segmented.css / checkbox.css). TODO(focus): unify. */
  :where(form, dialog, menu, t-primo)
    :where(input[type="range"]):not(:where(.noprimo, .noprimo *)):focus-visible {
    outline: var(--_stroke) solid var(--_on);
    outline-offset: 2px;
  }

  /* ── Disabled ────────────────────────────────────────────────────────────*/
  :where(form, dialog, menu, t-primo)
    :where(input[type="range"]):not(:where(.noprimo, .noprimo *)):disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }
  /* Drop the rail outline when disabled — no rail background. */
  :where(form, dialog, menu, t-primo)
    :where(input[type="range"]):not(:where(.noprimo, .noprimo *)):disabled::-webkit-slider-runnable-track {
    box-shadow: none;
  }
  :where(form, dialog, menu, t-primo)
    :where(input[type="range"]):not(:where(.noprimo, .noprimo *)):disabled::-moz-range-track {
    box-shadow: none;
  }

  /* Forced-colors / Windows High Contrast: box-shadow (the WebKit fill) and
     background are dropped by the UA, so pin the fill to Highlight and outline
     the thumb so track, fill and thumb stay distinguishable. */
  @media (forced-colors: active) {
    :where(form, dialog, menu, t-primo)
      :where(input[type="range"]):not(:where(.noprimo, .noprimo *))::-webkit-slider-thumb,
    :where(form, dialog, menu, t-primo)
      :where(input[type="range"]):not(:where(.noprimo, .noprimo *))::-moz-range-thumb {
      background: ButtonFace;
      border-color: ButtonText;
    }
    :where(form, dialog, menu, t-primo)
      :where(input[type="range"]):not(:where(.noprimo, .noprimo *))::-moz-range-progress {
      background: Highlight;
    }
  }
}