/* SakaniUI design tokens, unmodified: https://github.com/samzydd/Sakaniui (src/styles/tokens.css)
 * MIT License, Copyright (c) the SakaniUI authors. See THIRD_PARTY_NOTICES.md. */
:root {
  /* Breakpoints — matches the Figma "Breakpoints" variable collection.
     CSS custom properties can't be used inside @media conditions, so these
     exist as the documented source of truth; media queries below reference
     the same pixel values directly (see each component's responsive CSS). */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* Typography — Geist via @fontsource-variable/geist */
  --font-sans: "Geist Variable", "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
  /* ---- core color primitives ---- */
  --color-neutral-50: #FAFAF9;
  --color-neutral-100: #F5F4F2;
  --color-neutral-200: #E7E5E1;
  --color-neutral-300: #DBDAD7;
  --color-neutral-400: #A8A29B;
  --color-neutral-500: #78716A;
  --color-neutral-600: #57534E;
  --color-neutral-700: #3A3837;
  --color-neutral-800: #1F1F1F;
  --color-neutral-900: #141414;
  --color-neutral-950: #0F0E0C;
  --color-primary-50: #FFF3ED;
  --color-primary-100: #FFE4D4;
  --color-primary-200: #FFC7A8;
  --color-primary-300: #FFA170;
  --color-primary-400: #FF7538;
  --color-primary-500: #FF4700;
  --color-primary-600: #E63D00;
  --color-primary-700: #BF3200;
  --color-primary-800: #99290A;
  --color-primary-900: #7D250D;
  --color-primary-950: #431004;
  --color-success-50: #F1FEF6;
  --color-success-100: #D1FADF;
  --color-success-200: #A6F4C5;
  --color-success-300: #6CE9A6;
  --color-success-400: #32D583;
  --color-success-500: #12B76A;
  --color-success-600: #039855;
  --color-success-700: #027A48;
  --color-success-800: #05603A;
  --color-success-900: #054F31;
  --color-success-950: #033524;
  --color-warning-50: #FFFBF0;
  --color-warning-100: #FEF0C7;
  --color-warning-200: #FEDF89;
  --color-warning-300: #FEC84B;
  --color-warning-400: #FDB022;
  --color-warning-500: #F79009;
  --color-warning-600: #DC6803;
  --color-warning-700: #B54708;
  --color-warning-800: #93370D;
  --color-warning-900: #7A2E0E;
  --color-warning-950: #4E1D09;
  --color-danger-50: #FEF3F2;
  --color-danger-100: #FEE4E2;
  --color-danger-200: #FECDCA;
  --color-danger-300: #FDA29B;
  --color-danger-400: #F97066;
  --color-danger-500: #F04438;
  --color-danger-600: #D92D20;
  --color-danger-700: #B42318;
  --color-danger-800: #912018;
  --color-danger-900: #7A271A;
  --color-danger-950: #55160C;
  --color-info-50: #EFF8FF;
  --color-info-100: #D1E9FF;
  --color-info-200: #B2DDFF;
  --color-info-300: #84CAFF;
  --color-info-400: #53B1FD;
  --color-info-500: #2E90FA;
  --color-info-600: #1570EF;
  --color-info-700: #175CD3;
  --color-info-800: #1849A9;
  --color-info-900: #194185;
  --color-info-950: #102A56;
  --color-base-white: #FFFFFF;
  --color-base-black: #000000;
  /* Chart primitives (Figma "chart/1".."chart/6") — a dedicated data-vis
     palette, not a reuse of the semantic success/danger/info/neutral ramps.
     The old aliasing to those ramps was a coincidental, wrong substitute:
     none of their steps actually match Figma's chart hex values. */
  --color-chart-orange: #FF4700;
  --color-chart-blue: #5B92DD;
  --color-chart-teal: #47A8A2;
  --color-chart-purple: #9179D6;
  --color-chart-gold: #DCA84F;
  --color-chart-green: #12B76A;
  /* Code syntax-highlight primitives (Figma "Code Snippet") -- a fixed
     highlighting palette, not app UI, so it isn't drawn from the semantic
     bg/fg/border ramps or reused from chart/status colors that happen to
     share a similar hue. Same in light and dark, like the chart primitives. */
  --color-code-keyword: #7B4BD9;
  --color-code-string: #16A34A;

  /* ---- semantic (light) ---- */
  --color-bg-canvas: var(--color-neutral-50);
  --color-bg-surface: var(--color-base-white);
  --color-bg-subtle: var(--color-neutral-100);
  --color-bg-muted: var(--color-neutral-200);
  --color-bg-inverse: var(--color-neutral-900);
  --color-fg-default: var(--color-neutral-900);
  --color-fg-muted: var(--color-neutral-500); /* synced from Figma (was neutral-600) */
  --color-fg-subtle: var(--color-neutral-400); /* synced from Figma; note: 2.53:1 contrast on canvas bg, below WCAG AA's 4.5:1 for text */
  --color-fg-on-accent: var(--color-base-white);
  --color-fg-on-inverse: var(--color-neutral-50);
  --color-border-subtle: var(--color-neutral-200);
  --color-border-default: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-400);
  --color-border-focus: var(--color-primary-500);
  /* chart tokens — aliased to the dedicated chart primitives above (Figma
     chart/1..6). Brand-consistent data-vis colors, same in light and dark. */
  --color-chart-1: var(--color-chart-orange);
  --color-chart-2: var(--color-chart-blue);
  --color-chart-3: var(--color-chart-teal);
  --color-chart-4: var(--color-chart-purple);
  --color-chart-5: var(--color-chart-gold);
  --color-chart-6: var(--color-chart-green);
  --color-accent-default: var(--color-neutral-900);
  --color-accent-hover: var(--color-neutral-800);
  --color-accent-active: var(--color-neutral-700);
  --color-accent-subtle: var(--color-neutral-100);
  --color-accent-fg: var(--color-base-white);
  --color-brand-default: var(--color-primary-500);
  --color-brand-hover: var(--color-primary-600);
  --color-brand-subtle: var(--color-primary-50);
  --color-brand-fg: var(--color-primary-600);
  --color-success-fg: var(--color-success-700);
  --color-success-bg: var(--color-success-50);
  --color-success-border: var(--color-success-200);
  --color-success-solid: var(--color-success-500);
  --color-warning-fg: var(--color-warning-700);
  --color-warning-bg: var(--color-warning-50);
  --color-warning-border: var(--color-warning-200);
  --color-warning-solid: var(--color-warning-500);
  --color-danger-fg: var(--color-danger-700);
  --color-danger-bg: var(--color-danger-50);
  --color-danger-border: var(--color-danger-200);
  --color-danger-solid: var(--color-danger-500);
  --color-info-fg: var(--color-info-700);
  --color-info-bg: var(--color-info-50);
  --color-info-border: var(--color-info-200);
  --color-info-solid: var(--color-info-500);

  /* ---- spacing ---- */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ---- radius ---- */
  --radius-none: 0px;
  --radius-2xs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-full: 9999px;

  /* ---- border width ---- */
  --border-width-050: 0.5px;
  --border-width-100: 1px;
  --border-width-150: 1.5px;
  --border-width-200: 2px;
  --border-width-400: 4px;
  --border-width-600: 6px;

  /* ---- opacity ---- */
  --opacity-0: 0.0;
  --opacity-45: 0.45;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-100: 1.0;

  /* ---- shadows ---- */
  --shadow-xs: 0 1px 2px 0 rgba(16,15,12,0.05);
  --shadow-sm: 0 1px 3px 0 rgba(16,15,12,0.10), 0 1px 2px 0 rgba(16,15,12,0.06);
  --shadow-md: 0 4px 8px -2px rgba(16,15,12,0.10), 0 2px 4px -2px rgba(16,15,12,0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16,15,12,0.08), 0 4px 6px -2px rgba(16,15,12,0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16,15,12,0.10), 0 8px 8px -4px rgba(16,15,12,0.03);
  --shadow-2xl: 0 24px 48px -12px rgba(16,15,12,0.18);
  --shadow-left: -12px 0 32px -8px rgba(16,15,12,0.16);
  --shadow-right: 12px 0 32px -8px rgba(16,15,12,0.16);
  --shadow-up: 0 -12px 32px -8px rgba(16,15,12,0.16);

  /* ---- motion ---- */
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;

  /* Symmetric ease-in-out (easeInOutCubic): accelerates and decelerates evenly,
     so state changes read as movement rather than a snap. This is the default. */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Gentle ease-out (easeOutCubic) for things entering or leaving the screen.
     Deliberately softer than an expo curve, which starts too abruptly. */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  --transition-base: var(--motion-base) var(--ease-in-out);
  --transition-fast: var(--motion-fast) var(--ease-in-out);
  --transition-slow: var(--motion-slow) var(--ease-in-out);
  /* Hover-triggered motion specifically: ease-in-out's steep middle
     acceleration (see --ease-in-out above) reads as a snap for a response
     to the cursor arriving -- ease-out's immediate-then-settling curve
     feels like the natural way something "catches up" to a hover instead. */
  --transition-hover: var(--motion-slow) var(--ease-out);
}

/* Base font — everything using `font-family: inherit` resolves through here. */
html, body {
  font-family: var(--font-sans);
}

.dark {
  /* ---- semantic (dark) — only the semantic layer flips ---- */
  --color-bg-canvas: var(--color-neutral-950);
  --color-bg-surface: var(--color-neutral-900);
  --color-bg-subtle: var(--color-neutral-800);
  --color-bg-muted: var(--color-neutral-700);
  --color-bg-inverse: var(--color-neutral-50);
  --color-fg-default: var(--color-neutral-50);
  --color-fg-muted: var(--color-neutral-400);
  --color-fg-subtle: var(--color-neutral-500);
  --color-fg-on-accent: var(--color-neutral-900);
  --color-fg-on-inverse: var(--color-neutral-900);
  --color-border-subtle: var(--color-neutral-800);
  --color-border-default: var(--color-neutral-700);
  --color-border-strong: var(--color-neutral-600);
  --color-border-focus: var(--color-primary-400);
  /* chart tokens deliberately NOT overridden here -- they're primitives,
     not semantics, and stay the same brand-consistent hue in both modes
     (see the :root primitives block). */
  --color-accent-default: var(--color-neutral-50);
  --color-accent-hover: var(--color-neutral-200);
  --color-accent-active: var(--color-neutral-300);
  --color-accent-subtle: var(--color-neutral-800);
  --color-accent-fg: var(--color-neutral-900);
  --color-brand-default: var(--color-primary-500);
  --color-brand-hover: var(--color-primary-400);
  --color-brand-subtle: var(--color-primary-950);
  --color-brand-fg: var(--color-primary-400);
  --color-success-fg: var(--color-success-400);
  --color-success-bg: var(--color-success-950);
  --color-success-border: var(--color-success-800);
  --color-success-solid: var(--color-success-500);
  --color-warning-fg: var(--color-warning-400);
  --color-warning-bg: var(--color-warning-950);
  --color-warning-border: var(--color-warning-800);
  --color-warning-solid: var(--color-warning-500);
  --color-danger-fg: var(--color-danger-400);
  --color-danger-bg: var(--color-danger-950);
  --color-danger-border: var(--color-danger-800);
  --color-danger-solid: var(--color-danger-500);
  --color-info-fg: var(--color-info-400);
  --color-info-bg: var(--color-info-950);
  --color-info-border: var(--color-info-800);
  --color-info-solid: var(--color-info-500);
}

/* ── Global accessibility baseline ─────────────────────────────────────────── */

/* Consistent, token-driven focus ring on every interactive element.
 * :where() keeps specificity at 0 so component-specific rings still win.
 *
 * input/select/textarea were dropped from this list: every field component
 * (Input, Select, Combobox, Textarea, SidebarSearch) already designs its own
 * focus treatment on its *wrapper*, but this rule was ALSO matching the raw
 * native element nested inside that wrapper -- a second, independent
 * box-shadow rendering right on top of the component's own, since the two
 * target different elements rather than actually competing for the same
 * property. That showed up as an unwanted inner ring inside the field's own
 * border. Checkbox/Radio/Switch (hidden native input + a styled sibling) and
 * Slider (custom ::-webkit-slider-thumb treatment) each already have their
 * own dedicated :focus-visible rule too, so nothing loses its focus
 * indicator by removing these three tags here. */
:where(button, a, [tabindex]):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-bg-surface),
    0 0 0 4px var(--color-border-focus);
}

/* Smooth color crossfade on theme change (the light/dark switch). Zero
 * specificity (a bare universal selector), so any component's own more
 * specific transition rule -- for hover, focus, etc. -- always wins outright
 * and is completely unaffected; this only fills in elements that don't
 * declare their own, so toggling .dark doesn't leave some things fading
 * while everything else snaps instantly. */
*, *::before, *::after {
  transition: background-color var(--transition-base), color var(--transition-base),
    border-color var(--transition-base), box-shadow var(--transition-base);
}

/* Respect the user's motion preference (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
 * Surface layer — Solid | Glass
 *
 * How a surface is BUILT (opaque, or frosted and translucent), kept separate
 * from which COLOR THEME is on (light / .dark), so the two combine freely:
 * light solid, dark solid, light glass, dark glass. Mirrors the Figma
 * "Surface" variable collection (modes: Solid, Glass).
 *
 *   --surface-*  what components read. In Solid (the default everywhere)
 *                every one resolves to today's semantic token, so nothing
 *                changes unless an area opts in with data-surface="glass".
 *   --glass-*    the glass values, with light and dark variants below.
 *
 * Only surface-level things live here: fills, outer edges, the top-edge
 * highlight and the backdrop blur. Internal dividers and all text/accent
 * colors stay on the semantic tokens -- with one exception, fg/muted, which
 * glass nudges one step for contrast: at the translucency glass needs, the
 * regular muted text measures ~3:1 over a vivid backdrop (WCAG AA is 4.5:1);
 * one step darker (light) / lighter (dark) gets it back to ~5:1 / ~7:1.
 *
 * Re-declared on .dark (and on a .dark inside a glass area) because custom
 * properties resolve where they're declared -- declaring them once on :root
 * would freeze the light values into dark subtrees.
 * ========================================================================== */
:root {
  --glass-bg: rgba(255, 255, 255, 0.64);
  --glass-bg-overlay: rgba(255, 255, 255, 0.76);
  --glass-bg-chrome: rgba(255, 255, 255, 0.52);
  --glass-bg-subtle: rgba(16, 15, 12, 0.05);
  --glass-bg-subtle-hover: rgba(16, 15, 12, 0.09);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-border-strong: rgba(255, 255, 255, 0.75);
  --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  --glass-fg-muted: var(--color-neutral-600);
  --glass-blur: blur(16px) saturate(160%);
  --glass-blur-overlay: blur(24px) saturate(180%);
}
.dark {
  --glass-bg: rgba(20, 20, 20, 0.64);
  --glass-bg-overlay: rgba(20, 20, 20, 0.76);
  --glass-bg-chrome: rgba(20, 20, 20, 0.52);
  --glass-bg-subtle: rgba(255, 255, 255, 0.08);
  --glass-bg-subtle-hover: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-strong: rgba(255, 255, 255, 0.16);
  --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  --glass-fg-muted: var(--color-neutral-300);
}

/* Solid (default) */
:root, .dark, [data-surface="solid"] {
  --surface-bg: var(--color-bg-surface);                /* cards, inputs */
  --surface-bg-overlay: var(--color-bg-surface);        /* menus, modals, popovers */
  --surface-bg-chrome: transparent;                     /* sidebar, top bar */
  --surface-bg-subtle: var(--color-bg-subtle);          /* control fills, hover */
  --surface-bg-subtle-hover: var(--color-bg-muted);
  --surface-border: var(--color-border-subtle);         /* outer edges */
  --surface-border-strong: var(--color-border-default);
  --surface-highlight: 0 0 #0000;                       /* none */
  --surface-blur: none;
  --surface-blur-overlay: none;
  --surface-fg-muted: var(--color-fg-muted);            /* secondary text */
}

/* Glass */
[data-surface="glass"], [data-surface="glass"] .dark {
  --surface-bg: var(--glass-bg);
  --surface-bg-overlay: var(--glass-bg-overlay);
  --surface-bg-chrome: var(--glass-bg-chrome);
  --surface-bg-subtle: var(--glass-bg-subtle);
  --surface-bg-subtle-hover: var(--glass-bg-subtle-hover);
  --surface-border: var(--glass-border);
  --surface-border-strong: var(--glass-border-strong);
  --surface-highlight: var(--glass-highlight);
  --surface-blur: var(--glass-blur);
  --surface-blur-overlay: var(--glass-blur-overlay);
  --surface-fg-muted: var(--glass-fg-muted);
  --color-fg-muted: var(--glass-fg-muted);
}

/* Reduce transparency: a glass area renders exactly like Solid. The --surface-*
   tokens point back at the opaque semantic values, so no component needs its
   own fallback. */
@media (prefers-reduced-transparency: reduce) {
  [data-surface="glass"], [data-surface="glass"] .dark {
    --surface-bg: var(--color-bg-surface);
    --surface-bg-overlay: var(--color-bg-surface);
    --surface-bg-chrome: transparent;
    --surface-bg-subtle: var(--color-bg-subtle);
    --surface-bg-subtle-hover: var(--color-bg-muted);
    --surface-border: var(--color-border-subtle);
    --surface-border-strong: var(--color-border-default);
    --surface-highlight: 0 0 #0000;
    --surface-blur: none;
    --surface-blur-overlay: none;
  }
}

/* ==========================================================================
 * Liquid glass — the third Surface mode (Solid | Glass | Liquid)
 *
 * Glass = frosted: translucency + heavy blur, cheap, works everywhere.
 * Liquid = Apple-style: a much lighter frost, plus REFRACTION (the backdrop
 * bends near the edges like a lens), DISPERSION (a faint color fringe at the
 * rim), a specular RIM LIGHT, and DEPTH. Refraction needs an SVG filter
 * behind the element, which only Chromium supports in backdrop-filter;
 * Safari and Firefox get the frosted fallback with the same rim and depth.
 * The material lives on a LiquidGlass container (src/lib/LiquidGlass.tsx);
 * data-surface="liquid" inside it makes nested components transparent so
 * they sit on the container's material instead of stacking a second tint.
 *
 * Two variants, like Apple's:
 *   regular — tint high enough for body AND muted text (≥4.5:1 over vivid
 *             backdrops: 4.6 light / 6.5 dark). Panels, sidebars, modals.
 *   clear   — mostly see-through; icons and large labels only (small text
 *             drops to ~3:1 in dark). Floating toolbars, docks, controls.
 * ========================================================================== */
:root {
  /* Tints: how much of the backdrop shows through. */
  --liquid-tint-regular: rgba(255, 255, 255, 0.66);
  --liquid-tint-clear: rgba(255, 255, 255, 0.28);
  --liquid-tint-subtle: rgba(16, 15, 12, 0.05);     /* Figma glass/bg-subtle: a full-bleed overlay over a photo */
  --liquid-overlay-tint: var(--liquid-tint-subtle); /* the dashboard's overlay (a scrim in dark) */
  --liquid-panel-tint: rgba(255, 255, 255, 0.76);   /* a panel of glass that holds solid cards (glass/bg-overlay) */

  /* The lens: Figma's Glass effect properties, in Figma's units, one set per
     variant (the liquid/regular and liquid/clear effect styles). LiquidGlass
     turns them into pixels by rules measured from Figma's own renders (see
     src/lib/LiquidGlass.tsx). To override one element, set the unprefixed name
     (--liquid-refraction, --liquid-depth, ...) on it, or pass `effect`. */
  --liquid-refraction-regular: 0.55;     --liquid-refraction-clear: 0.8;     /* Refraction, 0-1 */
  --liquid-depth-regular: 16;            --liquid-depth-clear: 20;           /* Depth */
  --liquid-dispersion-regular: 0.3;      --liquid-dispersion-clear: 0.4;     /* Dispersion, 0-1 */
  --liquid-frost-regular: 4;             --liquid-frost-clear: 1;            /* Frost */
  --liquid-light-intensity-regular: 0.7; --liquid-light-intensity-clear: 0.8; /* Light intensity, 0-1 */
  --liquid-light-angle: -45;             /* Light angle: degrees clockwise from the top, -45 = top-left */

  --liquid-fallback-blur: blur(14px) saturate(180%);
  /* Unit vector toward the light, from the angle above. */
  --liquid-lx: sin(calc(var(--liquid-light-angle) * 1deg));
  --liquid-ly: calc(-1 * cos(calc(var(--liquid-light-angle) * 1deg)));
  /* Safari / Firefox fallback only (no SVG backdrop filters, so the light is CSS):
     a 1px rim, brighter where the edges face the light, and an inner shade/glow. */
  --liquid-rim: rgba(255, 255, 255, 0.5);
  --liquid-rim-soft: rgba(255, 255, 255, 0.47);
  --liquid-rim-far-soft: rgba(255, 255, 255, 0.27);
  --liquid-rim-far: rgba(255, 255, 255, 0.25);
  --liquid-edge-shade:
    inset calc(var(--liquid-lx) * -4px) calc(var(--liquid-ly) * -4px) 8px 1px rgba(0, 0, 0, 0.1),
    inset calc(var(--liquid-lx) * 4px) calc(var(--liquid-ly) * 4px) 8px 1px rgba(255, 255, 255, 0.07);
  /* Figma effect styles: regular = 0 6 12 -6 @16% + 0 2 4 @8%; clear = 0 3 8 -4 @16% + 0 1 3 @8%. */
  --liquid-shadow-regular: 0 6px 12px -6px rgba(16, 15, 12, 0.16), 0 2px 4px rgba(16, 15, 12, 0.08);
  --liquid-shadow-clear: 0 3px 8px -4px rgba(16, 15, 12, 0.16), 0 1px 3px rgba(16, 15, 12, 0.08);
  --liquid-glare: rgba(255, 255, 255, 0.35); /* pointer-following highlight */
}
.dark {
  --liquid-tint-regular: rgba(20, 20, 20, 0.66);
  --liquid-tint-clear: rgba(20, 20, 20, 0.3);
  --liquid-tint-subtle: rgba(255, 255, 255, 0.08);
  /* The lens and its light stay as in light: Figma's effect styles are the same in both themes. */
  --liquid-glare: rgba(255, 255, 255, 0.14);
  --liquid-overlay-tint: rgba(20, 20, 20, 0.72);  /* a real scrim: light text must read over bright photo areas */
  --liquid-panel-tint: rgba(20, 20, 20, 0.76);
}

/* Liquid scope: the container IS the material, so nested surfaces go clear
   (a faint tint for nested cards) and don't blur again. Everything else —
   control fills, edges, the fg/muted contrast nudge — behaves like Glass. */
[data-surface="liquid"], [data-surface="liquid"] .dark {
  --surface-bg: var(--glass-bg-subtle);
  --surface-bg-overlay: var(--glass-bg-subtle);
  --surface-bg-chrome: transparent;
  --surface-bg-subtle: var(--glass-bg-subtle);
  --surface-bg-subtle-hover: var(--glass-bg-subtle-hover);
  --surface-border: var(--glass-border);
  --surface-border-strong: var(--glass-border-strong);
  --surface-highlight: 0 0 #0000;
  --surface-blur: none;
  --surface-blur-overlay: none;
  --surface-fg-muted: var(--glass-fg-muted);
  --color-fg-muted: var(--glass-fg-muted);
}

/* Over a photograph: light text, in either theme. Put data-on-photo on the part
   of the UI that sits straight on the image (a header, a top bar, a promo).
   It also covers nested surfaces: a LiquidGlass inside re-applies the liquid
   scope's own muted color, which would otherwise win. */
[data-on-photo], [data-on-photo] [data-surface] {
  --color-fg-default: var(--color-base-white);
  --color-fg-muted: var(--color-base-white);
  --color-fg-subtle: var(--color-base-white);
  --surface-fg-muted: var(--color-base-white);
}