/* Generated from shared/tokens.js — do not edit by hand */

/* Prevent FOUC — hide ARC elements until they upgrade.
   Fade-in transition provided by :host styles in each component.
   Gated on scripting so no-JS visitors get visible content instead of a blank
   page, and scoped to ARC tags so we never hide elements we don't own.

   Opted out of by `<html data-arc-ssr>`. A server-rendered element arrives
   with its shadow root already attached and its content already painted, but
   it stays :not(:defined) until the JS upgrades it — so this rule would hide
   finished content for the whole of that window, which is precisely the
   opposite of what server rendering is for. CSS cannot detect a declarative
   shadow root (the browser consumes the <template> during parsing, leaving no
   selectable trace), so the page has to say so.

   The two attributes below are the other half of that, because a page can be
   *partly* server-rendered and then the root attribute alone makes one claim
   about elements in two different states.

   `data-arc-defer` marks an element the build chose not to render — long
   repeated lists, where only the first screenful can matter. It keeps the
   guard's `opacity: 0`, which holds the element's layout so nothing shifts
   when it upgrades; it simply fades in like it would on a page with no server
   rendering at all. Set by the build, never by hand. */
@media (scripting: enabled) {
  :root:not([data-arc-ssr]) :is(
  arc-accordion, arc-accordion-item, arc-activity-heatmap, arc-alert, arc-anchor-nav,
  arc-animated-number, arc-announcement, arc-app-shell, arc-aspect-grid, arc-aspect-ratio,
  arc-auth-shell, arc-avatar, arc-avatar-group, arc-badge, arc-banner, arc-blockquote,
  arc-bottom-nav, arc-breadcrumb, arc-breadcrumb-item, arc-breadcrumb-menu, arc-button,
  arc-button-group, arc-calendar, arc-card, arc-carousel, arc-center, arc-chart, arc-checkbox,
  arc-chip, arc-clock, arc-code-block, arc-collapsible, arc-color-picker, arc-color-swatch,
  arc-combobox, arc-command-bar, arc-command-group, arc-command-item, arc-command-palette,
  arc-comparison, arc-comparison-column, arc-confirm, arc-connection-status, arc-container,
  arc-context-menu, arc-conversation, arc-copy-button, arc-countdown-timer, arc-cta-banner,
  arc-dashboard-grid, arc-data-grid, arc-date-picker, arc-date-range-picker,
  arc-description-item, arc-description-list, arc-dialog, arc-diff, arc-divider, arc-drawer,
  arc-dropdown-menu, arc-empty-state, arc-feature-card, arc-fieldset, arc-file-upload,
  arc-float-bar, arc-footer, arc-form, arc-gauge, arc-gradient-text, arc-highlight, arc-hotkey,
  arc-hotspot, arc-hover-card, arc-icon, arc-icon-button, arc-icon-library, arc-image,
  arc-image-compare, arc-image-cropper, arc-image-hotspots, arc-infinite-scroll, arc-inline-edit,
  arc-input, arc-input-group, arc-inset, arc-json-tree, arc-kanban, arc-kbd, arc-keyboard-map,
  arc-knob, arc-label, arc-level-meter, arc-lightbox, arc-link, arc-list, arc-list-item,
  arc-loading-overlay, arc-markdown, arc-marquee, arc-masked-input, arc-masonry,
  arc-menu-divider, arc-menu-item, arc-menubar, arc-message, arc-meter, arc-multi-select,
  arc-nav-item, arc-navigation-menu, arc-notification-panel, arc-number-format, arc-number-input,
  arc-option, arc-page-header, arc-page-indicator, arc-page-layout, arc-pagination,
  arc-password-input, arc-pin-input, arc-popover, arc-progress, arc-prose, arc-qr-code,
  arc-radio, arc-radio-group, arc-rail, arc-range-slider, arc-rating, arc-resizable,
  arc-responsive-switcher, arc-scroll-area, arc-scroll-indicator, arc-scroll-spy,
  arc-scroll-to-top, arc-search, arc-section, arc-segmented-control, arc-select,
  arc-settings-layout, arc-sheet, arc-sidebar, arc-sidebar-link, arc-sidebar-section,
  arc-signature-pad, arc-skeleton, arc-skip-link, arc-slider, arc-sortable-list, arc-sparkline,
  arc-spinner, arc-split-pane, arc-spy-link, arc-stack, arc-stat, arc-status-bar, arc-step,
  arc-stepper, arc-stepper-nav, arc-sticky, arc-suggestion, arc-switch-group, arc-tab, arc-tabs,
  arc-tag, arc-tag-input, arc-terminal, arc-text, arc-textarea, arc-theme-toggle, arc-time-ago,
  arc-time-picker, arc-timeline, arc-timeline-item, arc-toast, arc-toggle, arc-toolbar,
  arc-tooltip, arc-top-bar, arc-transfer-list, arc-tree-item, arc-tree-select, arc-tree-view,
  arc-truncate, arc-typewriter, arc-uptime, arc-value-card, arc-video, arc-virtual-list,
  arc-waveform
  ):not(:defined),
  [data-arc-defer]:not(:defined) {
    opacity: 0;
  }

  /* A closed overlay, left un-rendered by the build because nothing inside one
     can reach a first paint. `opacity: 0` is wrong here and measurably so: it
     keeps the element in layout, so an un-upgraded command palette held 174
     items' worth of page until its JS arrived and collapsed them — LCP 784ms to
     2540ms. Closed means occupying nothing, which is what it will be once it
     upgrades. Set by the build, never by hand. */
  [data-arc-closed]:not(:defined) {
    display: none;
  }
}

:root {
  color-scheme: dark;

  --bg-deep: rgb(3, 3, 7);
  --bg-surface: rgb(10, 10, 15);
  --bg-base: rgb(10, 10, 15);
  --bg-card: rgb(13, 13, 18);
  --bg-elevated: rgb(17, 17, 22);

  --text-primary: rgb(232, 232, 236);
  --text-secondary: rgb(150, 152, 162);
  --text-muted: rgb(142, 142, 155);
  --text-ghost: rgb(133, 133, 154);

  --border-subtle: rgb(24, 24, 30);
  --border-default: rgb(34, 34, 41);
  --border-bright: rgb(51, 51, 64);

  --accent-primary: rgb(77, 126, 247);
  --accent-secondary: rgb(149, 103, 255);

  /* The accent captured under a name pinned regions never redeclare, so they
     can derive from it without referencing a property they are themselves
     declaring — which would be a cycle, and would invalidate both. Private and
     not part of the public token surface: override --accent-primary as usual
     and this follows, including into a pinned nav or footer. */
  --_brand-primary: var(--accent-primary);
  --_brand-secondary: var(--accent-secondary);

  --accent-primary-rgb: 77, 126, 247;
  --accent-secondary-rgb: 149, 103, 255;
  --text-primary-rgb: 232, 232, 236;
  --text-muted-rgb: 142, 142, 155;
  --border-default-rgb: 34, 34, 41;
  --color-error-rgb: 240, 69, 69;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;

  --accent-primary-subtle: rgba(var(--accent-primary-rgb), 0.06);
  --accent-primary-border: rgba(var(--accent-primary-rgb), 0.12);
  --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.2);
  --accent-primary-ring: rgba(var(--accent-primary-rgb), 0.15);
  --accent-secondary-subtle: rgba(var(--accent-secondary-rgb), 0.06);
  --accent-secondary-border: rgba(var(--accent-secondary-rgb), 0.12);
  --accent-secondary-glow: rgba(var(--accent-secondary-rgb), 0.2);

  --color-success: rgb(52, 211, 153);
  --color-success-rgb: 52, 211, 153;
  --color-error: rgb(240, 69, 69);
  --color-error-subtle: rgba(240, 69, 69, 0.1);
  --color-warning: rgb(245, 158, 11);
  --color-warning-rgb: 245, 158, 11;
  --color-warning-subtle: rgba(245, 158, 11, 0.1);
  --color-info: rgb(59, 130, 246);
  --color-info-rgb: 59, 130, 246;
  --color-info-subtle: rgba(59, 130, 246, 0.1);

  --chart-1: #4d7ef7;
  --chart-2: #ea580c;
  --chart-3: #0d9488;
  --chart-4: #8b5cf6;
  --chart-5: #db2777;
  --chart-6: #65a30d;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.25);

  --z-base: 0;
  --z-dropdown: 1000;
  --z-tooltip: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-max: 9999;

  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  --opacity-disabled: 0.5;
  --opacity-muted: 0.6;
  --opacity-hover: 0.8;
  --opacity-visible: 1;

  /* Font role slots. Override only the -family token to assign a typeface;
     the fallback and every component using the role follow automatically.
     Each role also carries a -weight, for faces that do not ship the weight
     the role is set at. */
  --font-body-family: 'Host Grotesk';
  --font-body-fallback: system-ui, sans-serif;
  --font-body-weight: 500;
  --font-body: var(--font-body-family), var(--font-body-fallback);

  --font-label-family: 'Tomorrow';
  --font-label-fallback: system-ui, -apple-system, Segoe UI, sans-serif;
  --font-label-weight: 600;
  --font-label: var(--font-label-family), var(--font-label-fallback);

  --font-mono-family: 'JetBrains Mono';
  --font-mono-fallback: ui-monospace, monospace;
  --font-mono-weight: 400;
  --font-mono: var(--font-mono-family), var(--font-mono-fallback);

  /* Display follows the text role until it is assigned a face of its own. Its
     weight does not follow: large type usually wants its own. */
  --font-display-family: var(--font-body-family);
  --font-display-fallback: var(--font-body-fallback);
  --font-display-weight: 500;
  --font-display: var(--font-display-family), var(--font-display-fallback);

  --font-quote-family: Georgia;
  --font-quote-fallback: serif;
  --font-quote-weight: 200;
  --font-quote: var(--font-quote-family), var(--font-quote-fallback);

  /* --font-accent named the label role before the slots were split out.
     Kept as an alias so existing overrides and usages keep working. */
  --font-accent: var(--font-label);

  --text-xs: 12px;
  --text-sm: 16px;
  --text-md: 17px;
  --text-lg: clamp(18px, 1.5vw, 20px);
  --text-xl: clamp(22px, 2.5vw, 26px);
  --text-2xl: clamp(28px, 3vw, 36px);
  --text-3xl: clamp(36px, 5vw, 52px);

  /* Private mirrors of the size scale. Components read these rather than the
     public --text-* names, because shared-styles.js has to declare a working
     default on :host and a token cannot fall back to itself:
     --text-md: var(--text-md, 17px) is a self-reference and invalid. Declaring
     the public name on :host instead is what made an override at :root
     unreachable — a value set on the host always beats one inherited into it.
     The indirection gives components a name that is only ever declared, and
     consumers a name that is only ever read.

     Emitted here as well as on :host so the standalone CSS build resolves them:
     there is no shadow root there, so :root is the only declaration site. */
  --_text-xs: var(--text-xs);
  --_text-sm: var(--text-sm);
  --_text-md: var(--text-md);
  --_text-lg: var(--text-lg);
  --_text-xl: var(--text-xl);
  --_text-2xl: var(--text-2xl);
  --_text-3xl: var(--text-3xl);

  --display-xl-size: var(--text-3xl);
  --display-xl-weight: var(--font-display-weight);
  --display-xl-spacing: -1px;
  --heading-size: var(--text-xl);
  --heading-weight: var(--font-display-weight);
  --heading-lh: 1.2;
  --body-size: var(--text-md);
  --body-weight: var(--font-body-weight);
  --body-lh: 1.7;
  --wordmark-size: clamp(20px, 2.5vw, 28px);
  --wordmark-weight: var(--font-display-weight);
  --wordmark-spacing: clamp(8px, 1.2vw, 14px);
  --glyph-lh: 1;
  --ui-lh: 1.4;
  --numeral-size: clamp(24px, 3vw, 36px);
  --numeral-weight: 200;
  --label-size: var(--text-xs);
  --label-weight: var(--font-label-weight);
  --label-spacing: 2px;
  --section-title-size: var(--label-size);
  --section-title-weight: var(--label-weight);
  --section-title-spacing: var(--label-spacing);
  --ui-accent-size: 16px;
  --ui-accent-weight: var(--font-label-weight);
  --ui-accent-spacing: 0.5px;
  --code-size: 14px;
  --code-lh: 1.8;
  --label-inline-size: 10px;
  --label-inline-spacing: 0.75px;
  --field-weight: 400;

  --touch-min: 24px;
  --touch-pad: 4px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-base: var(--duration-base) var(--ease-standard);
  --transition-slow: var(--duration-slow) var(--ease-standard);
  --transition-enter: var(--duration-enter) var(--ease-out);
  --transition-exit: var(--duration-exit) var(--ease-in);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --duration-enter: 500ms;
  --duration-exit: 300ms;

  /* Back-compat: the two curve names published before the motion scale
     existed. Public API, so they stay; new work spells --ease-out and
     --ease-standard. */
  --ease-out-expo: var(--ease-out);
  --ease-in-out: var(--ease-standard);

  --gradient-display-text: linear-gradient(135deg, rgb(232, 232, 236) 0%, rgb(124, 124, 137) 100%);
  --gradient-accent-text: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  --gradient-divider: linear-gradient(90deg, rgba(24, 24, 30, 0), rgb(24, 24, 30), rgba(24, 24, 30, 0));
  --gradient-divider-glow: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.2), rgba(var(--accent-secondary-rgb),0.12), rgba(var(--accent-secondary-rgb),0));
  --gradient-page-ambient: radial-gradient(ellipse, rgba(255, 255, 255,0.015) 0%, rgba(255, 255, 255,0) 70%);
  --gradient-sunset: linear-gradient(135deg, #ff6b6b, #ffa500, #ff4757);
  --gradient-ocean: linear-gradient(135deg, #00d2ff, #3a7bd5, #6dd5fa);

  --orb-close: #ff5f57;
  --orb-minimize: #febc2e;
  --orb-maximize: #28c840;

  --glow-white: 0 0 6px rgba(var(--text-primary-rgb),0.6), 0 0 18px rgba(var(--text-primary-rgb),0.25), 0 0 40px rgba(var(--text-primary-rgb),0.1);
  --glow-primary: 0 0 8px rgba(var(--accent-primary-rgb),0.9), 0 0 20px rgba(var(--accent-primary-rgb),0.5), 0 0 44px rgba(var(--accent-primary-rgb),0.25), 0 0 80px rgba(var(--accent-primary-rgb),0.1);
  --glow-secondary: 0 0 8px rgba(var(--accent-secondary-rgb),0.9), 0 0 20px rgba(var(--accent-secondary-rgb),0.4), 0 0 40px rgba(var(--accent-secondary-rgb),0.15);

  /* Lobes of light. The inputs are deliberately not declared: see the note in
     the tree above. */
  --lobe-line: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
  --lobe-start: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
  --lobe-end: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)));
  --lobe-ambient: radial-gradient(var(--lobe-shape, ellipse), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 0.08)) 0%, rgba(var(--lobe-rgb, var(--border-default-rgb)), 0) var(--lobe-extent, 70%));

  --glow-line-white: linear-gradient(90deg, rgba(var(--text-primary-rgb),0), rgba(var(--text-primary-rgb),0.35), rgba(var(--text-primary-rgb),0));
  --glow-line-blue: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.7), rgba(var(--accent-primary-rgb),0));
  --glow-line-gradient: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), var(--accent-primary), var(--accent-secondary), rgba(var(--accent-secondary-rgb),0));

  --glow-xs: 0 0 6px rgba(var(--accent-primary-rgb), 0.3);
  --glow-sm: 0 0 8px rgba(var(--accent-primary-rgb), 0.3);
  --glow-md: 0 0 12px rgba(var(--accent-primary-rgb), 0.25);
  --glow-status: 0 0 12px rgba(var(--_status-rgb), var(--glow-status-alpha, 0.15));
  --glow-status-alpha: 0.15;
  --glow-hover: 0 0 12px rgba(var(--accent-primary-rgb), 0.15);
  --glow-card-hover: 0 0 20px rgba(var(--accent-primary-rgb),0.08), 0 0 40px rgba(var(--accent-secondary-rgb),0.04);
  --gradient-border-glow: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.15), rgba(var(--accent-secondary-rgb),0.1), rgba(var(--accent-primary-rgb),0.05));
  --gradient-ambient: radial-gradient(circle at 15% 85%, rgba(var(--accent-primary-rgb),0.04) 0%, rgba(var(--accent-primary-rgb),0) 50%),
                      radial-gradient(circle at 85% 15%, rgba(var(--accent-secondary-rgb),0.03) 0%, rgba(var(--accent-secondary-rgb),0) 50%);

  --focus-ring: 0 0 0 1px rgba(var(--accent-primary-rgb),0.25);
  --focus-glow: 0 0 0 1px rgba(var(--accent-primary-rgb),0.2), 0 0 6px rgba(var(--accent-primary-rgb),0.35), 0 0 16px rgba(var(--accent-primary-rgb),0.2), 0 0 40px rgba(var(--accent-secondary-rgb),0.12);
  --focus-error: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--color-error), 0 0 16px rgba(var(--color-error-rgb), 0.2);
  --focus-inset: inset 0 0 0 2px var(--interactive);
  --focus-thumb: 0 0 8px rgba(var(--interactive-rgb), 0.5), 0 0 20px rgba(var(--interactive-rgb), 0.25);

  --max-width: 1120px;
  --max-width-sm: 720px;
  --nav-height: 64px;
  --nav-row-inset: var(--space-sm);

  --bg-hover: rgba(255, 255, 255, 0.04);
  --overlay-backdrop: rgba(0, 0, 0, 0.6);
  --accent-text-mix: 0%;

  /* Text painted ON an accent fill — the primary button's label, the active
     segment, the selected day in a picker.

     Not simply --surface-base, which is what those five call sites used to
     read. That works in dark, where the ground is near-black against a bright
     accent (5.53:1), but light mode pairs its near-white ground with a darker
     accent and lands at 4.30:1 — under AA, on the most-used control in the
     library. The light theme overrides this to pure white (4.79:1); the dark
     value stays exactly what it was, since white on the dark accent would be
     3.72:1 and strictly worse. */
  --on-accent: var(--surface-base);

  /* ── Semantic: Interactive ── */
  --interactive: var(--accent-primary);
  --interactive-rgb: var(--accent-primary-rgb);
  --interactive-hover: var(--glow-hover);
  --interactive-active: var(--glow-primary);
  --interactive-focus: var(--focus-glow);
  --interactive-focus-ring: var(--focus-ring);
  --interactive-focus-error: var(--focus-error);
  --interactive-focus-inset: var(--focus-inset);
  --interactive-focus-thumb: var(--focus-thumb);
  --interactive-muted: var(--text-ghost);

  /* ── Semantic: Surface ── */
  --surface-base: var(--bg-deep);
  --surface-primary: var(--bg-surface);
  --surface-raised: var(--bg-card);
  --surface-overlay: var(--bg-elevated);
  --surface-hover: var(--bg-hover);

  /* ── Semantic: Divider ── */
  --divider: var(--border-subtle);
  --divider-glow: var(--glow-line-gradient);

  /* ── Semantic: Feedback composites ── */
  --feedback-error-subtle: var(--color-error-subtle);
  --feedback-error-border: rgba(var(--color-error-rgb), 0.2);
  --feedback-error-glow: 0 0 12px rgba(var(--color-error-rgb), 0.15);
  --feedback-success-subtle: rgba(var(--color-success-rgb), 0.1);
  --feedback-success-border: rgba(var(--color-success-rgb), 0.2);
  --feedback-success-glow: 0 0 12px rgba(var(--color-success-rgb), 0.15);
  --feedback-warning-subtle: var(--color-warning-subtle);
  --feedback-warning-border: rgba(var(--color-warning-rgb), 0.2);
  --feedback-warning-glow: 0 0 12px rgba(var(--color-warning-rgb), 0.15);
  --feedback-info-subtle: var(--color-info-subtle);
  --feedback-info-border: rgba(var(--color-info-rgb), 0.2);
  --feedback-info-glow: 0 0 12px rgba(var(--color-info-rgb), 0.15);

}

@media (pointer: coarse) {
  :root {
    --touch-min: 36px;
    --touch-pad: 8px;
  }
}

/* Density presets.
   Spacing only: touch targets stay at the WCAG 2.2 minimum and type does not
   move, because tightening a layout and shrinking text are different
   decisions and only one of them is reversible by the reader. */
[data-density="compact"] {
  --space-xs: 3px;
  --space-sm: 6px;
  --space-md: 12px;
  --space-lg: 18px;
  --space-xl: 30px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 96px;
}

[data-density="comfortable"] {
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 20px;
  --space-lg: 30px;
  --space-xl: 50px;
  --space-2xl: 80px;
  --space-3xl: 120px;
  --space-4xl: 160px;
}

/* Light Theme Overrides */
[data-theme="light"] {
  color-scheme: light;
  --bg-deep: rgb(242, 242, 248);
  --bg-surface: rgb(248, 248, 252);
  --bg-base: rgb(244, 244, 250);
  --bg-card: rgb(248, 248, 252);
  --bg-elevated: rgb(238, 238, 246);
  --text-primary: rgb(35, 35, 55);
  --text-secondary: rgb(76, 79, 99);
  --text-muted: rgb(84, 87, 107);
  --text-ghost: rgb(91, 94, 116);
  --border-subtle: rgb(223, 225, 231);
  --border-default: rgb(210, 214, 222);
  --border-bright: rgb(185, 190, 200);
  --accent-primary: rgb(39, 86, 215);
  --accent-secondary: rgb(113, 61, 221);
  --color-success: rgb(0, 111, 80);
  --color-error: rgb(187, 38, 39);
  --color-warning: rgb(133, 88, 0);
  --color-info: rgb(27, 88, 190);
  --chart-1: #3769eb;
  --chart-4: #7846e6;
  --chart-6: #4d7c0f;
  --accent-primary-rgb: 39, 86, 215;
  --accent-secondary-rgb: 113, 61, 221;
  --text-primary-rgb: 35, 35, 55;
  --text-muted-rgb: 84, 87, 107;
  --border-default-rgb: 210, 214, 222;
  --shadow-xs: 0 1px 2px rgba(var(--accent-primary-rgb),0.06);
  --shadow-sm: 0 2px 4px rgba(var(--accent-primary-rgb),0.08), 0 1px 2px rgba(var(--accent-secondary-rgb),0.04);
  --shadow-md: 0 4px 12px rgba(var(--accent-primary-rgb),0.1), 0 2px 4px rgba(var(--accent-secondary-rgb),0.05);
  --shadow-lg: 0 8px 24px rgba(var(--accent-primary-rgb),0.12), 0 4px 8px rgba(var(--accent-secondary-rgb),0.06);
  --shadow-xl: 0 16px 48px rgba(var(--accent-primary-rgb),0.14), 0 8px 16px rgba(var(--accent-secondary-rgb),0.07);
  --shadow-overlay: 0 4px 24px rgba(var(--accent-primary-rgb),0.1), 0 8px 48px rgba(var(--accent-secondary-rgb),0.06);
  --gradient-display-text: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-primary) 100%);
  --gradient-divider: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.2), rgba(var(--accent-primary-rgb),0));
  --gradient-divider-glow: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.35), rgba(var(--accent-secondary-rgb),0.25), rgba(var(--accent-secondary-rgb),0));
  --gradient-page-ambient: radial-gradient(ellipse, rgba(var(--accent-primary-rgb),0.06) 0%, rgba(var(--accent-primary-rgb),0) 70%);
  --gradient-border-glow: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.2), rgba(var(--accent-secondary-rgb),0.15), rgba(var(--accent-primary-rgb),0.08));
  --gradient-ambient: radial-gradient(circle at 15% 85%, rgba(var(--accent-primary-rgb),0.07) 0%, rgba(var(--accent-primary-rgb),0) 50%),
    radial-gradient(circle at 85% 15%, rgba(var(--accent-secondary-rgb),0.05) 0%, rgba(var(--accent-secondary-rgb),0) 50%);
  --glow-primary: 0 0 8px rgba(var(--accent-primary-rgb),0.5), 0 0 24px rgba(var(--accent-primary-rgb),0.2), 0 0 48px rgba(var(--accent-primary-rgb),0.08);
  --glow-secondary: 0 0 8px rgba(var(--accent-secondary-rgb),0.5), 0 0 24px rgba(var(--accent-secondary-rgb),0.2), 0 0 48px rgba(var(--accent-secondary-rgb),0.08);
  --glow-white: 0 0 8px rgba(var(--accent-primary-rgb),0.15), 0 0 20px rgba(var(--accent-secondary-rgb),0.08);
  --glow-card-hover: 0 0 20px rgba(var(--accent-primary-rgb),0.12), 0 0 40px rgba(var(--accent-secondary-rgb),0.06);
  --glow-xs: 0 0 6px rgba(var(--accent-primary-rgb), 0.42);
  --glow-sm: 0 0 8px rgba(var(--accent-primary-rgb), 0.42);
  --glow-md: 0 0 12px rgba(var(--accent-primary-rgb), 0.36);
  --glow-hover: 0 0 12px rgba(var(--accent-primary-rgb), 0.22);
  --glow-status-alpha: 0.22;
  --focus-ring: 0 0 0 1px rgba(var(--accent-primary-rgb),0.38);
  --focus-glow: 0 0 0 1px rgba(var(--accent-primary-rgb),0.3), 0 0 6px rgba(var(--accent-primary-rgb),0.5), 0 0 16px rgba(var(--accent-primary-rgb),0.3), 0 0 40px rgba(var(--accent-secondary-rgb),0.18);
  --focus-error: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--color-error), 0 0 16px rgba(var(--color-error-rgb), 0.3);
  --focus-thumb: 0 0 8px rgba(var(--interactive-rgb), 0.5), 0 0 20px rgba(var(--interactive-rgb), 0.38);
  --glow-line-white: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.15), rgba(var(--accent-primary-rgb),0));
  --glow-line-blue: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.6), rgba(var(--accent-primary-rgb),0));
  --bg-hover: rgba(55, 105, 235, 0.04);
  --overlay-backdrop: rgba(20, 20, 40, 0.25);
  --on-accent: rgb(var(--white-rgb));
  --accent-text-mix: 55%;
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    color-scheme: light;
    --bg-deep: rgb(242, 242, 248);
    --bg-surface: rgb(248, 248, 252);
    --bg-base: rgb(244, 244, 250);
    --bg-card: rgb(248, 248, 252);
    --bg-elevated: rgb(238, 238, 246);
    --text-primary: rgb(35, 35, 55);
    --text-secondary: rgb(76, 79, 99);
    --text-muted: rgb(84, 87, 107);
    --text-ghost: rgb(91, 94, 116);
    --border-subtle: rgb(223, 225, 231);
    --border-default: rgb(210, 214, 222);
    --border-bright: rgb(185, 190, 200);
    --accent-primary: rgb(39, 86, 215);
    --accent-secondary: rgb(113, 61, 221);
    --color-success: rgb(0, 111, 80);
    --color-error: rgb(187, 38, 39);
    --color-warning: rgb(133, 88, 0);
    --color-info: rgb(27, 88, 190);
    --chart-1: #3769eb;
    --chart-4: #7846e6;
    --chart-6: #4d7c0f;
    --accent-primary-rgb: 39, 86, 215;
    --accent-secondary-rgb: 113, 61, 221;
    --text-primary-rgb: 35, 35, 55;
    --text-muted-rgb: 84, 87, 107;
    --border-default-rgb: 210, 214, 222;
    --shadow-xs: 0 1px 2px rgba(var(--accent-primary-rgb),0.06);
    --shadow-sm: 0 2px 4px rgba(var(--accent-primary-rgb),0.08), 0 1px 2px rgba(var(--accent-secondary-rgb),0.04);
    --shadow-md: 0 4px 12px rgba(var(--accent-primary-rgb),0.1), 0 2px 4px rgba(var(--accent-secondary-rgb),0.05);
    --shadow-lg: 0 8px 24px rgba(var(--accent-primary-rgb),0.12), 0 4px 8px rgba(var(--accent-secondary-rgb),0.06);
    --shadow-xl: 0 16px 48px rgba(var(--accent-primary-rgb),0.14), 0 8px 16px rgba(var(--accent-secondary-rgb),0.07);
    --shadow-overlay: 0 4px 24px rgba(var(--accent-primary-rgb),0.1), 0 8px 48px rgba(var(--accent-secondary-rgb),0.06);
    --gradient-display-text: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-primary) 100%);
    --gradient-divider: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.2), rgba(var(--accent-primary-rgb),0));
    --gradient-divider-glow: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.35), rgba(var(--accent-secondary-rgb),0.25), rgba(var(--accent-secondary-rgb),0));
    --gradient-page-ambient: radial-gradient(ellipse, rgba(var(--accent-primary-rgb),0.06) 0%, rgba(var(--accent-primary-rgb),0) 70%);
    --gradient-border-glow: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.2), rgba(var(--accent-secondary-rgb),0.15), rgba(var(--accent-primary-rgb),0.08));
    --gradient-ambient: radial-gradient(circle at 15% 85%, rgba(var(--accent-primary-rgb),0.07) 0%, rgba(var(--accent-primary-rgb),0) 50%),
    radial-gradient(circle at 85% 15%, rgba(var(--accent-secondary-rgb),0.05) 0%, rgba(var(--accent-secondary-rgb),0) 50%);
    --glow-primary: 0 0 8px rgba(var(--accent-primary-rgb),0.5), 0 0 24px rgba(var(--accent-primary-rgb),0.2), 0 0 48px rgba(var(--accent-primary-rgb),0.08);
    --glow-secondary: 0 0 8px rgba(var(--accent-secondary-rgb),0.5), 0 0 24px rgba(var(--accent-secondary-rgb),0.2), 0 0 48px rgba(var(--accent-secondary-rgb),0.08);
    --glow-white: 0 0 8px rgba(var(--accent-primary-rgb),0.15), 0 0 20px rgba(var(--accent-secondary-rgb),0.08);
    --glow-card-hover: 0 0 20px rgba(var(--accent-primary-rgb),0.12), 0 0 40px rgba(var(--accent-secondary-rgb),0.06);
    --glow-xs: 0 0 6px rgba(var(--accent-primary-rgb), 0.42);
    --glow-sm: 0 0 8px rgba(var(--accent-primary-rgb), 0.42);
    --glow-md: 0 0 12px rgba(var(--accent-primary-rgb), 0.36);
    --glow-hover: 0 0 12px rgba(var(--accent-primary-rgb), 0.22);
    --glow-status-alpha: 0.22;
    --focus-ring: 0 0 0 1px rgba(var(--accent-primary-rgb),0.38);
    --focus-glow: 0 0 0 1px rgba(var(--accent-primary-rgb),0.3), 0 0 6px rgba(var(--accent-primary-rgb),0.5), 0 0 16px rgba(var(--accent-primary-rgb),0.3), 0 0 40px rgba(var(--accent-secondary-rgb),0.18);
    --focus-error: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--color-error), 0 0 16px rgba(var(--color-error-rgb), 0.3);
    --focus-thumb: 0 0 8px rgba(var(--interactive-rgb), 0.5), 0 0 20px rgba(var(--interactive-rgb), 0.38);
    --glow-line-white: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.15), rgba(var(--accent-primary-rgb),0));
    --glow-line-blue: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.6), rgba(var(--accent-primary-rgb),0));
    --bg-hover: rgba(55, 105, 235, 0.04);
    --overlay-backdrop: rgba(20, 20, 40, 0.25);
    --on-accent: rgb(var(--white-rgb));
    --accent-text-mix: 55%;
  }
}

/* Let a :root override reach into shadow DOM.
   Each of these is also declared on :host by every component — which is what
   makes a component render correctly with no base.css at all — and a value set
   on the host beats one inherited into it. Without this rule
   `:root { --space-md: 20px }` would be silently ignored.
   Scoped to ARC's own tags: this must never be a universal selector, which
   would push these values onto every element in the consumer's page. */
:where(
  arc-accordion, arc-accordion-item, arc-activity-heatmap, arc-alert, arc-anchor-nav,
  arc-animated-number, arc-announcement, arc-app-shell, arc-aspect-grid, arc-aspect-ratio,
  arc-auth-shell, arc-avatar, arc-avatar-group, arc-badge, arc-banner, arc-blockquote,
  arc-bottom-nav, arc-breadcrumb, arc-breadcrumb-item, arc-breadcrumb-menu, arc-button,
  arc-button-group, arc-calendar, arc-card, arc-carousel, arc-center, arc-chart, arc-checkbox,
  arc-chip, arc-clock, arc-code-block, arc-collapsible, arc-color-picker, arc-color-swatch,
  arc-combobox, arc-command-bar, arc-command-group, arc-command-item, arc-command-palette,
  arc-comparison, arc-comparison-column, arc-confirm, arc-connection-status, arc-container,
  arc-context-menu, arc-conversation, arc-copy-button, arc-countdown-timer, arc-cta-banner,
  arc-dashboard-grid, arc-data-grid, arc-date-picker, arc-date-range-picker,
  arc-description-item, arc-description-list, arc-dialog, arc-diff, arc-divider, arc-drawer,
  arc-dropdown-menu, arc-empty-state, arc-feature-card, arc-fieldset, arc-file-upload,
  arc-float-bar, arc-footer, arc-form, arc-gauge, arc-gradient-text, arc-highlight, arc-hotkey,
  arc-hotspot, arc-hover-card, arc-icon, arc-icon-button, arc-icon-library, arc-image,
  arc-image-compare, arc-image-cropper, arc-image-hotspots, arc-infinite-scroll, arc-inline-edit,
  arc-input, arc-input-group, arc-inset, arc-json-tree, arc-kanban, arc-kbd, arc-keyboard-map,
  arc-knob, arc-label, arc-level-meter, arc-lightbox, arc-link, arc-list, arc-list-item,
  arc-loading-overlay, arc-markdown, arc-marquee, arc-masked-input, arc-masonry,
  arc-menu-divider, arc-menu-item, arc-menubar, arc-message, arc-meter, arc-multi-select,
  arc-nav-item, arc-navigation-menu, arc-notification-panel, arc-number-format, arc-number-input,
  arc-option, arc-page-header, arc-page-indicator, arc-page-layout, arc-pagination,
  arc-password-input, arc-pin-input, arc-popover, arc-progress, arc-prose, arc-qr-code,
  arc-radio, arc-radio-group, arc-rail, arc-range-slider, arc-rating, arc-resizable,
  arc-responsive-switcher, arc-scroll-area, arc-scroll-indicator, arc-scroll-spy,
  arc-scroll-to-top, arc-search, arc-section, arc-segmented-control, arc-select,
  arc-settings-layout, arc-sheet, arc-sidebar, arc-sidebar-link, arc-sidebar-section,
  arc-signature-pad, arc-skeleton, arc-skip-link, arc-slider, arc-sortable-list, arc-sparkline,
  arc-spinner, arc-split-pane, arc-spy-link, arc-stack, arc-stat, arc-status-bar, arc-step,
  arc-stepper, arc-stepper-nav, arc-sticky, arc-suggestion, arc-switch-group, arc-tab, arc-tabs,
  arc-tag, arc-tag-input, arc-terminal, arc-text, arc-textarea, arc-theme-toggle, arc-time-ago,
  arc-time-picker, arc-timeline, arc-timeline-item, arc-toast, arc-toggle, arc-toolbar,
  arc-tooltip, arc-top-bar, arc-transfer-list, arc-tree-item, arc-tree-select, arc-tree-view,
  arc-truncate, arc-typewriter, arc-uptime, arc-value-card, arc-video, arc-virtual-list,
  arc-waveform
) {
  --display-xl-weight: inherit;
  --display-xl-spacing: inherit;
  --heading-weight: inherit;
  --heading-lh: inherit;
  --body-weight: inherit;
  --body-lh: inherit;
  --wordmark-size: inherit;
  --wordmark-weight: inherit;
  --wordmark-spacing: inherit;
  --glyph-lh: inherit;
  --ui-lh: inherit;
  --numeral-size: inherit;
  --numeral-weight: inherit;
  --label-weight: inherit;
  --label-spacing: inherit;
  --section-title-size: inherit;
  --section-title-weight: inherit;
  --section-title-spacing: inherit;
  --ui-accent-size: inherit;
  --ui-accent-weight: inherit;
  --ui-accent-spacing: inherit;
  --code-size: inherit;
  --code-lh: inherit;
  --label-inline-size: inherit;
  --label-inline-spacing: inherit;
  --space-xs: inherit;
  --space-sm: inherit;
  --space-md: inherit;
  --space-lg: inherit;
  --space-xl: inherit;
  --space-2xl: inherit;
  --space-3xl: inherit;
  --space-4xl: inherit;
  --radius-xs: inherit;
  --radius-sm: inherit;
  --radius-md: inherit;
  --radius-lg: inherit;
  --radius-xl: inherit;
  --radius-full: inherit;
  --transition-fast: inherit;
  --transition-base: inherit;
  --transition-slow: inherit;
  --transition-enter: inherit;
  --transition-exit: inherit;
  --ease-standard: inherit;
  --ease-out: inherit;
  --ease-in: inherit;
  --ease-spring: inherit;
  --duration-fast: inherit;
  --duration-base: inherit;
  --duration-slow: inherit;
  --duration-enter: inherit;
  --duration-exit: inherit;
  --ease-out-expo: inherit;
  --ease-in-out: inherit;
  --z-base: inherit;
  --z-dropdown: inherit;
  --z-tooltip: inherit;
  --z-overlay: inherit;
  --z-modal: inherit;
  --z-toast: inherit;
  --z-max: inherit;
  --glow-xs: inherit;
  --glow-sm: inherit;
  --glow-md: inherit;
  --glow-status-alpha: inherit;
  --glow-hover: inherit;
  --focus-ring: inherit;
  --focus-glow: inherit;
  --focus-error: inherit;
  --focus-inset: inherit;
  --focus-thumb: inherit;
  --gradient-sunset: inherit;
  --gradient-ocean: inherit;
  --orb-close: inherit;
  --orb-minimize: inherit;
  --orb-maximize: inherit;
  --interactive: inherit;
  --interactive-rgb: inherit;
  --interactive-hover: inherit;
  --interactive-active: inherit;
  --interactive-focus: inherit;
  --interactive-focus-ring: inherit;
  --interactive-focus-error: inherit;
  --interactive-focus-inset: inherit;
  --interactive-focus-thumb: inherit;
  --interactive-muted: inherit;
  --surface-base: inherit;
  --surface-primary: inherit;
  --surface-raised: inherit;
  --surface-overlay: inherit;
  --surface-hover: inherit;
  --divider: inherit;
  --on-accent: inherit;
  --touch-min: inherit;
  --touch-pad: inherit;
  --max-width: inherit;
  --max-width-sm: inherit;
  --nav-height: inherit;
  --nav-row-inset: inherit;
}

/* Fixed Scheme — a subtree pinned to one scheme regardless of the page theme.

   Two classes, each with two landing points. A pinned dark region is plain
   near-black on a dark page — nothing to do, the page is already there — and on
   a light page it lands on an accent-lifted deep color instead, because it is
   not allowed to go full light and a raw black slab against near-white is the
   thing this exists to avoid. .theme-fixed-light is the same in mirror.
   (No backticks anywhere in this comment: it lives inside a template literal,
   so one would end the string and take the rest of the stylesheet with it.)

   The lifted palette is not a third option a consumer picks. It is where the
   pin *resolves* when the page disagrees, which is why it has no name in the
   API: naming it alongside the scheme made it look like an independent choice
   and produced a hard/soft axis that nothing needed.

   Each block also restates every :root property that resolves against these —
   the semantic aliases, the glows, the focus recipes. A custom property
   substitutes where it is DECLARED and then inherits the resolved value, so
   without the restatement --surface-base and friends arrive carrying the page's
   colors and quietly ignore the scheme set here. That list is computed to a
   fixpoint rather than hand-kept. */
.theme-fixed-dark {
  color-scheme: dark;
  --bg-deep: rgb(3, 3, 7);
  --bg-surface: rgb(10, 10, 15);
  --bg-base: rgb(10, 10, 15);
  --bg-card: rgb(13, 13, 18);
  --bg-elevated: rgb(17, 17, 22);
  --text-primary: rgb(232, 232, 236);
  --text-secondary: rgb(150, 152, 162);
  --text-muted: rgb(142, 142, 155);
  --text-ghost: rgb(133, 133, 154);
  --border-subtle: rgb(24, 24, 30);
  --border-default: rgb(34, 34, 41);
  --border-bright: rgb(51, 51, 64);
  --accent-primary: rgb(77, 126, 247);
  --accent-secondary: rgb(149, 103, 255);
  --color-success: rgb(52, 211, 153);
  --color-error: rgb(240, 69, 69);
  --color-warning: rgb(245, 158, 11);
  --color-info: rgb(59, 130, 246);
  --chart-1: #4d7ef7;
  --chart-4: #8b5cf6;
  --chart-6: #65a30d;
  --text-primary-rgb: 232, 232, 236;
  --text-muted-rgb: 142, 142, 155;
  --border-default-rgb: 34, 34, 41;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.4);
  --gradient-display-text: linear-gradient(135deg, rgb(232, 232, 236) 0%, rgb(124, 124, 137) 100%);
  --gradient-divider: linear-gradient(90deg, rgba(24, 24, 30, 0), rgb(24, 24, 30), rgba(24, 24, 30, 0));
  --gradient-divider-glow: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.2), rgba(var(--accent-secondary-rgb),0.12), rgba(var(--accent-secondary-rgb),0));
  --gradient-page-ambient: radial-gradient(ellipse, rgba(255, 255, 255,0.015) 0%, rgba(255, 255, 255,0) 70%);
  --gradient-border-glow: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.15), rgba(var(--accent-secondary-rgb),0.1), rgba(var(--accent-primary-rgb),0.05));
  --gradient-ambient: radial-gradient(circle at 15% 85%, rgba(var(--accent-primary-rgb),0.04) 0%, rgba(var(--accent-primary-rgb),0) 50%), radial-gradient(circle at 85% 15%, rgba(var(--accent-secondary-rgb),0.03) 0%, rgba(var(--accent-secondary-rgb),0) 50%);
  --glow-primary: 0 0 8px rgba(var(--accent-primary-rgb),0.9), 0 0 20px rgba(var(--accent-primary-rgb),0.5), 0 0 44px rgba(var(--accent-primary-rgb),0.25), 0 0 80px rgba(var(--accent-primary-rgb),0.1);
  --glow-secondary: 0 0 8px rgba(var(--accent-secondary-rgb),0.9), 0 0 20px rgba(var(--accent-secondary-rgb),0.4), 0 0 40px rgba(var(--accent-secondary-rgb),0.15);
  --glow-white: 0 0 6px rgba(var(--text-primary-rgb),0.6), 0 0 18px rgba(var(--text-primary-rgb),0.25), 0 0 40px rgba(var(--text-primary-rgb),0.1);
  --glow-card-hover: 0 0 20px rgba(var(--accent-primary-rgb),0.08), 0 0 40px rgba(var(--accent-secondary-rgb),0.04);
  --glow-xs: 0 0 6px rgba(var(--accent-primary-rgb), 0.3);
  --glow-sm: 0 0 8px rgba(var(--accent-primary-rgb), 0.3);
  --glow-md: 0 0 12px rgba(var(--accent-primary-rgb), 0.25);
  --glow-hover: 0 0 12px rgba(var(--accent-primary-rgb), 0.15);
  --glow-status-alpha: 0.15;
  --focus-ring: 0 0 0 1px rgba(var(--accent-primary-rgb),0.25);
  --focus-glow: 0 0 0 1px rgba(var(--accent-primary-rgb),0.2), 0 0 6px rgba(var(--accent-primary-rgb),0.35), 0 0 16px rgba(var(--accent-primary-rgb),0.2), 0 0 40px rgba(var(--accent-secondary-rgb),0.12);
  --focus-error: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--color-error), 0 0 16px rgba(var(--color-error-rgb), 0.2);
  --focus-thumb: 0 0 8px rgba(var(--interactive-rgb), 0.5), 0 0 20px rgba(var(--interactive-rgb), 0.25);
  --glow-line-white: linear-gradient(90deg, rgba(var(--text-primary-rgb),0), rgba(var(--text-primary-rgb),0.35), rgba(var(--text-primary-rgb),0));
  --glow-line-blue: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.7), rgba(var(--accent-primary-rgb),0));
  --bg-hover: rgba(255, 255, 255, 0.04);
  --overlay-backdrop: rgba(0, 0, 0, 0.6);
  --on-accent: var(--surface-base);
  --accent-text-mix: 0%;
  --accent-primary-subtle: rgba(var(--accent-primary-rgb), 0.06);
  --accent-primary-border: rgba(var(--accent-primary-rgb), 0.12);
  --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.2);
  --accent-primary-ring: rgba(var(--accent-primary-rgb), 0.15);
  --accent-secondary-subtle: rgba(var(--accent-secondary-rgb), 0.06);
  --accent-secondary-border: rgba(var(--accent-secondary-rgb), 0.12);
  --accent-secondary-glow: rgba(var(--accent-secondary-rgb), 0.2);
  --gradient-accent-text: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  --lobe-line: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
  --lobe-start: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
  --lobe-end: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)));
  --lobe-ambient: radial-gradient(var(--lobe-shape, ellipse), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 0.08)) 0%, rgba(var(--lobe-rgb, var(--border-default-rgb)), 0) var(--lobe-extent, 70%));
  --glow-line-gradient: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), var(--accent-primary), var(--accent-secondary), rgba(var(--accent-secondary-rgb),0));
  --interactive: var(--accent-primary);
  --interactive-rgb: var(--accent-primary-rgb);
  --interactive-hover: var(--glow-hover);
  --interactive-active: var(--glow-primary);
  --interactive-focus: var(--focus-glow);
  --interactive-focus-ring: var(--focus-ring);
  --interactive-focus-error: var(--focus-error);
  --interactive-focus-thumb: var(--focus-thumb);
  --interactive-muted: var(--text-ghost);
  --surface-base: var(--bg-deep);
  --surface-primary: var(--bg-surface);
  --surface-raised: var(--bg-card);
  --surface-overlay: var(--bg-elevated);
  --surface-hover: var(--bg-hover);
  --divider: var(--border-subtle);
  --divider-glow: var(--glow-line-gradient);
  --focus-inset: inset 0 0 0 2px var(--interactive);
  --interactive-focus-inset: var(--focus-inset);
}

/* On a light page it lifts rather than staying black. */
[data-theme="light"] .theme-fixed-dark {
  --bg-deep: rgb(19, 32, 62);
  --bg-surface: rgb(25, 40, 79);
  --bg-base: rgb(25, 40, 79);
  --bg-card: rgb(26, 43, 84);
  --bg-elevated: rgb(28, 47, 91);
  --border-subtle: rgb(31, 50, 99);
  --border-default: rgb(35, 57, 111);
  --border-bright: rgb(43, 71, 138);
  --text-primary: rgb(232, 232, 236);
  --text-secondary: rgb(170, 173, 183);
  --text-muted: rgb(162, 162, 175);
  --text-ghost: rgb(153, 153, 174);
  --accent-primary: rgb(96, 148, 255);
  --accent-secondary: rgb(171, 127, 255);
  --color-success: rgb(52, 211, 153);
  --color-error: rgb(255, 99, 94);
  --color-warning: rgb(245, 158, 11);
  --color-info: rgb(79, 151, 255);
  --text-primary-rgb: 232, 232, 236;
  --text-muted-rgb: 162, 162, 175;
  --border-default-rgb: 35, 57, 111;
  --color-error-rgb: 255, 99, 94;
  --color-success-rgb: 52, 211, 153;
  --color-warning-rgb: 245, 158, 11;
  --color-info-rgb: 79, 151, 255;
  --accent-primary-subtle: rgba(var(--accent-primary-rgb), 0.06);
  --accent-primary-border: rgba(var(--accent-primary-rgb), 0.12);
  --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.2);
  --accent-primary-ring: rgba(var(--accent-primary-rgb), 0.15);
  --accent-secondary-subtle: rgba(var(--accent-secondary-rgb), 0.06);
  --accent-secondary-border: rgba(var(--accent-secondary-rgb), 0.12);
  --accent-secondary-glow: rgba(var(--accent-secondary-rgb), 0.2);
  --gradient-accent-text: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  --lobe-line: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
  --lobe-start: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
  --lobe-end: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)));
  --lobe-ambient: radial-gradient(var(--lobe-shape, ellipse), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 0.08)) 0%, rgba(var(--lobe-rgb, var(--border-default-rgb)), 0) var(--lobe-extent, 70%));
  --glow-line-gradient: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), var(--accent-primary), var(--accent-secondary), rgba(var(--accent-secondary-rgb),0));
  --interactive: var(--accent-primary);
  --interactive-rgb: var(--accent-primary-rgb);
  --interactive-hover: var(--glow-hover);
  --interactive-active: var(--glow-primary);
  --interactive-focus: var(--focus-glow);
  --interactive-focus-ring: var(--focus-ring);
  --interactive-focus-error: var(--focus-error);
  --interactive-focus-thumb: var(--focus-thumb);
  --interactive-muted: var(--text-ghost);
  --surface-base: var(--bg-deep);
  --surface-primary: var(--bg-surface);
  --surface-raised: var(--bg-card);
  --surface-overlay: var(--bg-elevated);
  --surface-hover: var(--bg-hover);
  --divider: var(--border-subtle);
  --divider-glow: var(--glow-line-gradient);
  --focus-inset: inset 0 0 0 2px var(--interactive);
  --interactive-focus-inset: var(--focus-inset);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] .theme-fixed-dark {
    --bg-deep: rgb(19, 32, 62);
    --bg-surface: rgb(25, 40, 79);
    --bg-base: rgb(25, 40, 79);
    --bg-card: rgb(26, 43, 84);
    --bg-elevated: rgb(28, 47, 91);
    --border-subtle: rgb(31, 50, 99);
    --border-default: rgb(35, 57, 111);
    --border-bright: rgb(43, 71, 138);
    --text-primary: rgb(232, 232, 236);
    --text-secondary: rgb(170, 173, 183);
    --text-muted: rgb(162, 162, 175);
    --text-ghost: rgb(153, 153, 174);
    --accent-primary: rgb(96, 148, 255);
    --accent-secondary: rgb(171, 127, 255);
    --color-success: rgb(52, 211, 153);
    --color-error: rgb(255, 99, 94);
    --color-warning: rgb(245, 158, 11);
    --color-info: rgb(79, 151, 255);
    --text-primary-rgb: 232, 232, 236;
    --text-muted-rgb: 162, 162, 175;
    --border-default-rgb: 35, 57, 111;
    --color-error-rgb: 255, 99, 94;
    --color-success-rgb: 52, 211, 153;
    --color-warning-rgb: 245, 158, 11;
    --color-info-rgb: 79, 151, 255;
    --accent-primary-subtle: rgba(var(--accent-primary-rgb), 0.06);
    --accent-primary-border: rgba(var(--accent-primary-rgb), 0.12);
    --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.2);
    --accent-primary-ring: rgba(var(--accent-primary-rgb), 0.15);
    --accent-secondary-subtle: rgba(var(--accent-secondary-rgb), 0.06);
    --accent-secondary-border: rgba(var(--accent-secondary-rgb), 0.12);
    --accent-secondary-glow: rgba(var(--accent-secondary-rgb), 0.2);
    --gradient-accent-text: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    --lobe-line: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
    --lobe-start: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
    --lobe-end: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)));
    --lobe-ambient: radial-gradient(var(--lobe-shape, ellipse), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 0.08)) 0%, rgba(var(--lobe-rgb, var(--border-default-rgb)), 0) var(--lobe-extent, 70%));
    --glow-line-gradient: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), var(--accent-primary), var(--accent-secondary), rgba(var(--accent-secondary-rgb),0));
    --interactive: var(--accent-primary);
    --interactive-rgb: var(--accent-primary-rgb);
    --interactive-hover: var(--glow-hover);
    --interactive-active: var(--glow-primary);
    --interactive-focus: var(--focus-glow);
    --interactive-focus-ring: var(--focus-ring);
    --interactive-focus-error: var(--focus-error);
    --interactive-focus-thumb: var(--focus-thumb);
    --interactive-muted: var(--text-ghost);
    --surface-base: var(--bg-deep);
    --surface-primary: var(--bg-surface);
    --surface-raised: var(--bg-card);
    --surface-overlay: var(--bg-elevated);
    --surface-hover: var(--bg-hover);
    --divider: var(--border-subtle);
    --divider-glow: var(--glow-line-gradient);
    --focus-inset: inset 0 0 0 2px var(--interactive);
    --interactive-focus-inset: var(--focus-inset);
  }
}

.theme-fixed-light {
  color-scheme: light;
  --bg-deep: rgb(242, 242, 248);
  --bg-surface: rgb(248, 248, 252);
  --bg-base: rgb(244, 244, 250);
  --bg-card: rgb(248, 248, 252);
  --bg-elevated: rgb(238, 238, 246);
  --text-primary: rgb(35, 35, 55);
  --text-secondary: rgb(76, 79, 99);
  --text-muted: rgb(84, 87, 107);
  --text-ghost: rgb(91, 94, 116);
  --border-subtle: rgb(223, 225, 231);
  --border-default: rgb(210, 214, 222);
  --border-bright: rgb(185, 190, 200);
  --accent-primary: rgb(39, 86, 215);
  --accent-secondary: rgb(113, 61, 221);
  --color-success: rgb(0, 111, 80);
  --color-error: rgb(187, 38, 39);
  --color-warning: rgb(133, 88, 0);
  --color-info: rgb(27, 88, 190);
  --chart-1: #3769eb;
  --chart-4: #7846e6;
  --chart-6: #4d7c0f;
  --text-primary-rgb: 35, 35, 55;
  --text-muted-rgb: 84, 87, 107;
  --border-default-rgb: 210, 214, 222;
  --shadow-xs: 0 1px 2px rgba(var(--accent-primary-rgb),0.06);
  --shadow-sm: 0 2px 4px rgba(var(--accent-primary-rgb),0.08), 0 1px 2px rgba(var(--accent-secondary-rgb),0.04);
  --shadow-md: 0 4px 12px rgba(var(--accent-primary-rgb),0.1), 0 2px 4px rgba(var(--accent-secondary-rgb),0.05);
  --shadow-lg: 0 8px 24px rgba(var(--accent-primary-rgb),0.12), 0 4px 8px rgba(var(--accent-secondary-rgb),0.06);
  --shadow-xl: 0 16px 48px rgba(var(--accent-primary-rgb),0.14), 0 8px 16px rgba(var(--accent-secondary-rgb),0.07);
  --shadow-overlay: 0 4px 24px rgba(var(--accent-primary-rgb),0.1), 0 8px 48px rgba(var(--accent-secondary-rgb),0.06);
  --gradient-display-text: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-primary) 100%);
  --gradient-divider: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.2), rgba(var(--accent-primary-rgb),0));
  --gradient-divider-glow: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.35), rgba(var(--accent-secondary-rgb),0.25), rgba(var(--accent-secondary-rgb),0));
  --gradient-page-ambient: radial-gradient(ellipse, rgba(var(--accent-primary-rgb),0.06) 0%, rgba(var(--accent-primary-rgb),0) 70%);
  --gradient-border-glow: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.2), rgba(var(--accent-secondary-rgb),0.15), rgba(var(--accent-primary-rgb),0.08));
  --gradient-ambient: radial-gradient(circle at 15% 85%, rgba(var(--accent-primary-rgb),0.07) 0%, rgba(var(--accent-primary-rgb),0) 50%),
    radial-gradient(circle at 85% 15%, rgba(var(--accent-secondary-rgb),0.05) 0%, rgba(var(--accent-secondary-rgb),0) 50%);
  --glow-primary: 0 0 8px rgba(var(--accent-primary-rgb),0.5), 0 0 24px rgba(var(--accent-primary-rgb),0.2), 0 0 48px rgba(var(--accent-primary-rgb),0.08);
  --glow-secondary: 0 0 8px rgba(var(--accent-secondary-rgb),0.5), 0 0 24px rgba(var(--accent-secondary-rgb),0.2), 0 0 48px rgba(var(--accent-secondary-rgb),0.08);
  --glow-white: 0 0 8px rgba(var(--accent-primary-rgb),0.15), 0 0 20px rgba(var(--accent-secondary-rgb),0.08);
  --glow-card-hover: 0 0 20px rgba(var(--accent-primary-rgb),0.12), 0 0 40px rgba(var(--accent-secondary-rgb),0.06);
  --glow-xs: 0 0 6px rgba(var(--accent-primary-rgb), 0.42);
  --glow-sm: 0 0 8px rgba(var(--accent-primary-rgb), 0.42);
  --glow-md: 0 0 12px rgba(var(--accent-primary-rgb), 0.36);
  --glow-hover: 0 0 12px rgba(var(--accent-primary-rgb), 0.22);
  --glow-status-alpha: 0.22;
  --focus-ring: 0 0 0 1px rgba(var(--accent-primary-rgb),0.38);
  --focus-glow: 0 0 0 1px rgba(var(--accent-primary-rgb),0.3), 0 0 6px rgba(var(--accent-primary-rgb),0.5), 0 0 16px rgba(var(--accent-primary-rgb),0.3), 0 0 40px rgba(var(--accent-secondary-rgb),0.18);
  --focus-error: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--color-error), 0 0 16px rgba(var(--color-error-rgb), 0.3);
  --focus-thumb: 0 0 8px rgba(var(--interactive-rgb), 0.5), 0 0 20px rgba(var(--interactive-rgb), 0.38);
  --glow-line-white: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.15), rgba(var(--accent-primary-rgb),0));
  --glow-line-blue: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), rgba(var(--accent-primary-rgb),0.6), rgba(var(--accent-primary-rgb),0));
  --bg-hover: rgba(55, 105, 235, 0.04);
  --overlay-backdrop: rgba(20, 20, 40, 0.25);
  --on-accent: rgb(var(--white-rgb));
  --accent-text-mix: 55%;
  --accent-primary-subtle: rgba(var(--accent-primary-rgb), 0.06);
  --accent-primary-border: rgba(var(--accent-primary-rgb), 0.12);
  --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.2);
  --accent-primary-ring: rgba(var(--accent-primary-rgb), 0.15);
  --accent-secondary-subtle: rgba(var(--accent-secondary-rgb), 0.06);
  --accent-secondary-border: rgba(var(--accent-secondary-rgb), 0.12);
  --accent-secondary-glow: rgba(var(--accent-secondary-rgb), 0.2);
  --gradient-accent-text: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  --lobe-line: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
  --lobe-start: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
  --lobe-end: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)));
  --lobe-ambient: radial-gradient(var(--lobe-shape, ellipse), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 0.08)) 0%, rgba(var(--lobe-rgb, var(--border-default-rgb)), 0) var(--lobe-extent, 70%));
  --glow-line-gradient: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), var(--accent-primary), var(--accent-secondary), rgba(var(--accent-secondary-rgb),0));
  --interactive: var(--accent-primary);
  --interactive-rgb: var(--accent-primary-rgb);
  --interactive-hover: var(--glow-hover);
  --interactive-active: var(--glow-primary);
  --interactive-focus: var(--focus-glow);
  --interactive-focus-ring: var(--focus-ring);
  --interactive-focus-error: var(--focus-error);
  --interactive-focus-thumb: var(--focus-thumb);
  --interactive-muted: var(--text-ghost);
  --surface-base: var(--bg-deep);
  --surface-primary: var(--bg-surface);
  --surface-raised: var(--bg-card);
  --surface-overlay: var(--bg-elevated);
  --surface-hover: var(--bg-hover);
  --divider: var(--border-subtle);
  --divider-glow: var(--glow-line-gradient);
  --focus-inset: inset 0 0 0 2px var(--interactive);
  --interactive-focus-inset: var(--focus-inset);
}

/* Dark is the default page, so this covers an explicit dark theme and the case
   where a consumer never sets the attribute at all. */
[data-theme="dark"] .theme-fixed-light,
:root:not([data-theme]) .theme-fixed-light {
  --bg-deep: rgb(201, 213, 245);
  --bg-surface: rgb(207, 218, 246);
  --bg-base: rgb(203, 214, 245);
  --bg-card: rgb(207, 218, 246);
  --bg-elevated: rgb(197, 209, 244);
  --border-subtle: rgb(181, 197, 240);
  --border-default: rgb(166, 186, 239);
  --border-bright: rgb(138, 164, 233);
  --text-primary: rgb(35, 35, 55);
  --text-secondary: rgb(59, 62, 81);
  --text-muted: rgb(66, 69, 88);
  --text-ghost: rgb(74, 76, 98);
  --accent-primary: rgb(24, 66, 194);
  --accent-secondary: rgb(97, 36, 199);
  --color-success: rgb(0, 92, 62);
  --color-error: rgb(164, 0, 17);
  --color-warning: rgb(114, 70, 0);
  --color-info: rgb(9, 73, 174);
  --text-primary-rgb: 35, 35, 55;
  --text-muted-rgb: 66, 69, 88;
  --border-default-rgb: 166, 186, 239;
  --color-error-rgb: 164, 0, 17;
  --color-success-rgb: 0, 92, 62;
  --color-warning-rgb: 114, 70, 0;
  --color-info-rgb: 9, 73, 174;
  --accent-primary-subtle: rgba(var(--accent-primary-rgb), 0.06);
  --accent-primary-border: rgba(var(--accent-primary-rgb), 0.12);
  --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.2);
  --accent-primary-ring: rgba(var(--accent-primary-rgb), 0.15);
  --accent-secondary-subtle: rgba(var(--accent-secondary-rgb), 0.06);
  --accent-secondary-border: rgba(var(--accent-secondary-rgb), 0.12);
  --accent-secondary-glow: rgba(var(--accent-secondary-rgb), 0.2);
  --gradient-accent-text: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  --lobe-line: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
  --lobe-start: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
  --lobe-end: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)));
  --lobe-ambient: radial-gradient(var(--lobe-shape, ellipse), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 0.08)) 0%, rgba(var(--lobe-rgb, var(--border-default-rgb)), 0) var(--lobe-extent, 70%));
  --glow-line-gradient: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), var(--accent-primary), var(--accent-secondary), rgba(var(--accent-secondary-rgb),0));
  --interactive: var(--accent-primary);
  --interactive-rgb: var(--accent-primary-rgb);
  --interactive-hover: var(--glow-hover);
  --interactive-active: var(--glow-primary);
  --interactive-focus: var(--focus-glow);
  --interactive-focus-ring: var(--focus-ring);
  --interactive-focus-error: var(--focus-error);
  --interactive-focus-thumb: var(--focus-thumb);
  --interactive-muted: var(--text-ghost);
  --surface-base: var(--bg-deep);
  --surface-primary: var(--bg-surface);
  --surface-raised: var(--bg-card);
  --surface-overlay: var(--bg-elevated);
  --surface-hover: var(--bg-hover);
  --divider: var(--border-subtle);
  --divider-glow: var(--glow-line-gradient);
  --focus-inset: inset 0 0 0 2px var(--interactive);
  --interactive-focus-inset: var(--focus-inset);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .theme-fixed-light {
    --bg-deep: rgb(201, 213, 245);
    --bg-surface: rgb(207, 218, 246);
    --bg-base: rgb(203, 214, 245);
    --bg-card: rgb(207, 218, 246);
    --bg-elevated: rgb(197, 209, 244);
    --border-subtle: rgb(181, 197, 240);
    --border-default: rgb(166, 186, 239);
    --border-bright: rgb(138, 164, 233);
    --text-primary: rgb(35, 35, 55);
    --text-secondary: rgb(59, 62, 81);
    --text-muted: rgb(66, 69, 88);
    --text-ghost: rgb(74, 76, 98);
    --accent-primary: rgb(24, 66, 194);
    --accent-secondary: rgb(97, 36, 199);
    --color-success: rgb(0, 92, 62);
    --color-error: rgb(164, 0, 17);
    --color-warning: rgb(114, 70, 0);
    --color-info: rgb(9, 73, 174);
    --text-primary-rgb: 35, 35, 55;
    --text-muted-rgb: 66, 69, 88;
    --border-default-rgb: 166, 186, 239;
    --color-error-rgb: 164, 0, 17;
    --color-success-rgb: 0, 92, 62;
    --color-warning-rgb: 114, 70, 0;
    --color-info-rgb: 9, 73, 174;
    --accent-primary-subtle: rgba(var(--accent-primary-rgb), 0.06);
    --accent-primary-border: rgba(var(--accent-primary-rgb), 0.12);
    --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.2);
    --accent-primary-ring: rgba(var(--accent-primary-rgb), 0.15);
    --accent-secondary-subtle: rgba(var(--accent-secondary-rgb), 0.06);
    --accent-secondary-border: rgba(var(--accent-secondary-rgb), 0.12);
    --accent-secondary-glow: rgba(var(--accent-secondary-rgb), 0.2);
    --gradient-accent-text: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    --lobe-line: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
    --lobe-start: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
    --lobe-end: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)));
    --lobe-ambient: radial-gradient(var(--lobe-shape, ellipse), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 0.08)) 0%, rgba(var(--lobe-rgb, var(--border-default-rgb)), 0) var(--lobe-extent, 70%));
    --glow-line-gradient: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0), var(--accent-primary), var(--accent-secondary), rgba(var(--accent-secondary-rgb),0));
    --interactive: var(--accent-primary);
    --interactive-rgb: var(--accent-primary-rgb);
    --interactive-hover: var(--glow-hover);
    --interactive-active: var(--glow-primary);
    --interactive-focus: var(--focus-glow);
    --interactive-focus-ring: var(--focus-ring);
    --interactive-focus-error: var(--focus-error);
    --interactive-focus-thumb: var(--focus-thumb);
    --interactive-muted: var(--text-ghost);
    --surface-base: var(--bg-deep);
    --surface-primary: var(--bg-surface);
    --surface-raised: var(--bg-card);
    --surface-overlay: var(--bg-elevated);
    --surface-hover: var(--bg-hover);
    --divider: var(--border-subtle);
    --divider-glow: var(--glow-line-gradient);
    --focus-inset: inset 0 0 0 2px var(--interactive);
    --interactive-focus-inset: var(--focus-inset);
  }
}

/* Carry the consumer's accent into a pinned region.
   A region declares its own accent, so it cannot derive from the property it
   declares — :root captures the accent privately and these read that. Behind
   @supports because relative color syntax is what moves a hue to another
   scheme's lightness without washing it out; without it a region keeps the
   baked palette above, which is right for ARC's own accent and merely fixed. */
@supports (color: oklch(from red l c h)) {
  .theme-fixed-dark {
    --accent-primary: oklch(from var(--_brand-primary) 0.6225 c h);
    --accent-secondary: oklch(from var(--_brand-secondary) 0.6374 c h);
  }

  [data-theme="light"] .theme-fixed-dark {
    --bg-deep: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 25%, rgb(0, 0, 0));
    --bg-surface: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 32%, rgb(0, 0, 0));
    --bg-base: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 32%, rgb(0, 0, 0));
    --bg-card: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 34%, rgb(0, 0, 0));
    --bg-elevated: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 37%, rgb(0, 0, 0));
    --border-subtle: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 40%, rgb(0, 0, 0));
    --border-default: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 45%, rgb(0, 0, 0));
    --border-bright: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 56%, rgb(0, 0, 0));
    --accent-primary: oklch(from var(--_brand-primary) 0.6809 c h);
    --accent-secondary: oklch(from var(--_brand-secondary) 0.6951 c h);
  }

  .theme-fixed-light {
    --accent-primary: oklch(from var(--_brand-primary) 0.5050 c h);
    --accent-secondary: oklch(from var(--_brand-secondary) 0.5199 c h);
  }

  [data-theme="dark"] .theme-fixed-light,
  :root:not([data-theme]) .theme-fixed-light {
    --bg-deep: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 25%, rgb(255, 255, 255));
    --bg-surface: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 22%, rgb(255, 255, 255));
    --bg-base: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 24%, rgb(255, 255, 255));
    --bg-card: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 22%, rgb(255, 255, 255));
    --bg-elevated: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 27%, rgb(255, 255, 255));
    --border-subtle: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 34%, rgb(255, 255, 255));
    --border-default: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 41%, rgb(255, 255, 255));
    --border-bright: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 54%, rgb(255, 255, 255));
    --accent-primary: oklch(from var(--_brand-primary) 0.4444 c h);
    --accent-secondary: oklch(from var(--_brand-secondary) 0.4574 c h);
  }

  @media (prefers-color-scheme: light) {
    [data-theme="auto"] .theme-fixed-dark {
      --bg-deep: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 25%, rgb(0, 0, 0));
      --bg-surface: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 32%, rgb(0, 0, 0));
      --bg-base: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 32%, rgb(0, 0, 0));
      --bg-card: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 34%, rgb(0, 0, 0));
      --bg-elevated: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 37%, rgb(0, 0, 0));
      --border-subtle: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 40%, rgb(0, 0, 0));
      --border-default: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 45%, rgb(0, 0, 0));
      --border-bright: color-mix(in srgb, oklch(from var(--_brand-primary) 0.6225 c h) 56%, rgb(0, 0, 0));
      --accent-primary: oklch(from var(--_brand-primary) 0.6809 c h);
      --accent-secondary: oklch(from var(--_brand-secondary) 0.6951 c h);
    }
  }

  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .theme-fixed-light {
      --bg-deep: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 25%, rgb(255, 255, 255));
      --bg-surface: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 22%, rgb(255, 255, 255));
      --bg-base: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 24%, rgb(255, 255, 255));
      --bg-card: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 22%, rgb(255, 255, 255));
      --bg-elevated: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 27%, rgb(255, 255, 255));
      --border-subtle: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 34%, rgb(255, 255, 255));
      --border-default: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 41%, rgb(255, 255, 255));
      --border-bright: color-mix(in srgb, oklch(from var(--_brand-primary) 0.5050 c h) 54%, rgb(255, 255, 255));
      --accent-primary: oklch(from var(--_brand-primary) 0.4444 c h);
      --accent-secondary: oklch(from var(--_brand-secondary) 0.4574 c h);
    }
  }
}
