@cascivo/react 0.10.1 → 0.11.1

package/dist/styles.css

@@ -36,6 +36,772 @@
  */
 @layer cascivo.reset, cascivo.base, cascivo.tokens, cascivo.component, cascivo.theme, cascivo.blocks,
   cascivo.override;
+/* packages/tokens/src/index.css */
+/* cascivo Design System — Primitive Tokens */
+/* These are raw values. Never use directly in components. Use semantic tokens. */
+
+/* Establish the canonical cascade-layer order before any layered rule. Every
+   consumer path imports @cascivo/tokens (directly or via a theme), so this rides
+   along first and dedupes by URL. See ./layers.css for the authoritative order. */
+
+@layer cascivo.tokens {
+  :root {
+    /* ── Color Primitives ─────────────────────────────── */
+
+    /* Gray (near-achromatic, hue ≈ 264) */
+    --cascivo-gray-0: oklch(1 0 0);
+    --cascivo-gray-50: oklch(0.985 0.002 264);
+    --cascivo-gray-100: oklch(0.967 0.003 264);
+    --cascivo-gray-200: oklch(0.928 0.006 264);
+    --cascivo-gray-300: oklch(0.872 0.008 264);
+    --cascivo-gray-400: oklch(0.707 0.015 264);
+    --cascivo-gray-500: oklch(0.554 0.018 264);
+    --cascivo-gray-600: oklch(0.446 0.018 264);
+    --cascivo-gray-700: oklch(0.373 0.015 264);
+    --cascivo-gray-800: oklch(0.269 0.01 264);
+    --cascivo-gray-900: oklch(0.205 0.007 264);
+    --cascivo-gray-950: oklch(0.145 0.005 264);
+
+    /* Blue / accent (hue ≈ 250) */
+    --cascivo-blue-50: oklch(0.97 0.025 250);
+    --cascivo-blue-100: oklch(0.932 0.055 250);
+    --cascivo-blue-200: oklch(0.882 0.095 250);
+    --cascivo-blue-300: oklch(0.808 0.14 250);
+    --cascivo-blue-400: oklch(0.707 0.18 250);
+    --cascivo-blue-500: oklch(0.623 0.214 250);
+    --cascivo-blue-600: oklch(0.546 0.224 250);
+    --cascivo-blue-700: oklch(0.452 0.196 250);
+    --cascivo-blue-800: oklch(0.373 0.155 250);
+    --cascivo-blue-900: oklch(0.29 0.105 250);
+    --cascivo-blue-950: oklch(0.205 0.065 250);
+
+    /* Green (hue ≈ 145) */
+    --cascivo-green-50: oklch(0.982 0.018 145);
+    --cascivo-green-100: oklch(0.962 0.044 145);
+    --cascivo-green-200: oklch(0.925 0.084 145);
+    --cascivo-green-400: oklch(0.75 0.15 145);
+    --cascivo-green-500: oklch(0.648 0.15 145);
+    --cascivo-green-600: oklch(0.548 0.14 145);
+    --cascivo-green-700: oklch(0.448 0.12 145);
+    --cascivo-green-900: oklch(0.28 0.075 145);
+
+    /* Red (hue ≈ 22) */
+    --cascivo-red-50: oklch(0.971 0.013 22);
+    --cascivo-red-100: oklch(0.936 0.032 22);
+    --cascivo-red-200: oklch(0.885 0.062 22);
+    --cascivo-red-400: oklch(0.72 0.16 22);
+    --cascivo-red-500: oklch(0.628 0.188 22);
+    --cascivo-red-600: oklch(0.54 0.188 22);
+    --cascivo-red-700: oklch(0.448 0.17 22);
+    --cascivo-red-900: oklch(0.28 0.1 22);
+
+    /* Orange (hue ≈ 40) */
+    --cascivo-orange-50: oklch(0.98 0.02 75);
+    --cascivo-orange-100: oklch(0.96 0.045 75);
+    --cascivo-orange-400: oklch(0.82 0.13 60);
+    --cascivo-orange-500: oklch(0.768 0.145 55);
+    --cascivo-orange-600: oklch(0.68 0.155 50);
+
+    /* Yellow / amber (hue ≈ 75) */
+    --cascivo-yellow-50: oklch(0.987 0.026 95);
+    --cascivo-yellow-100: oklch(0.973 0.05 95);
+    --cascivo-yellow-400: oklch(0.868 0.145 80);
+    --cascivo-yellow-500: oklch(0.768 0.145 75);
+
+    /* Warm neutrals */
+    --cascivo-warm-50: oklch(0.982 0.008 80);
+    --cascivo-warm-100: oklch(0.962 0.016 80);
+    --cascivo-warm-200: oklch(0.92 0.025 78);
+    --cascivo-warm-300: oklch(0.87 0.035 75);
+    --cascivo-warm-400: oklch(0.76 0.045 70);
+    --cascivo-warm-500: oklch(0.64 0.045 65);
+    --cascivo-warm-600: oklch(0.52 0.04 60);
+    --cascivo-warm-700: oklch(0.42 0.03 55);
+    --cascivo-warm-800: oklch(0.31 0.022 50);
+    --cascivo-warm-900: oklch(0.21 0.015 50);
+
+    /* ── Spacing ──────────────────────────────────────── */
+    --cascivo-space-0: 0px;
+    --cascivo-space-1: 0.25rem; /* 4px */
+    --cascivo-space-2: 0.5rem; /* 8px */
+    --cascivo-space-3: 0.75rem; /* 12px */
+    --cascivo-space-4: 1rem; /* 16px */
+    --cascivo-space-5: 1.25rem; /* 20px */
+    --cascivo-space-6: 1.5rem; /* 24px */
+    --cascivo-space-8: 2rem; /* 32px */
+    --cascivo-space-10: 2.5rem; /* 40px */
+    --cascivo-space-12: 3rem; /* 48px */
+    --cascivo-space-16: 4rem; /* 64px */
+    --cascivo-space-20: 5rem; /* 80px */
+    --cascivo-space-24: 6rem; /* 96px */
+
+    /* ── Typography ───────────────────────────────────── */
+    --cascivo-font-sans:
+      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --cascivo-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+    /* Display = the headline/brand face a theme may override (terminal, brutalist,
+       arcade …). Defaults to the sans stack, so themes that do not override it look
+       unchanged. sans/mono remain the body/code defaults. Per-theme overrides live in
+       each theme file (declared in all themes to satisfy token parity). */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
+    --cascivo-text-xs: 0.75rem; /* 12px */
+    --cascivo-text-sm: 0.875rem; /* 14px */
+    --cascivo-text-base: 1rem; /* 16px */
+    --cascivo-text-lg: 1.125rem; /* 18px */
+    --cascivo-text-xl: 1.25rem; /* 20px */
+    --cascivo-text-2xl: 1.5rem; /* 24px */
+    --cascivo-text-3xl: 1.875rem; /* 30px */
+    --cascivo-text-4xl: 2.25rem; /* 36px */
+
+    --cascivo-font-normal: 400;
+    --cascivo-font-medium: 500;
+    --cascivo-font-semibold: 600;
+    --cascivo-font-bold: 700;
+
+    --cascivo-leading-none: 1;
+    --cascivo-leading-tight: 1.25;
+    --cascivo-leading-snug: 1.375;
+    --cascivo-leading-normal: 1.5;
+    --cascivo-leading-relaxed: 1.625;
+
+    --cascivo-tracking-tight: -0.025em;
+    --cascivo-tracking-normal: 0em;
+    --cascivo-tracking-wide: 0.025em;
+
+    /* ── Typography roles (semantic) ───────────────────
+       Purpose-named type tokens. Each resolves to exactly ONE primitive size
+       above, so "what size is a button label?" has exactly one answer:
+       --cascivo-text-ui. These tokens carry size only; pair them with the
+       recommended weight/leading in docs/cookbooks/derivable-theming.md. */
+    --cascivo-text-display: var(--cascivo-text-4xl); /* hero / marketing display */
+    --cascivo-text-heading-lg: var(--cascivo-text-3xl); /* page title (h1) */
+    --cascivo-text-heading-md: var(--cascivo-text-2xl); /* section heading (h2) */
+    --cascivo-text-heading-sm: var(--cascivo-text-xl); /* subsection heading (h3) */
+    --cascivo-text-body: var(--cascivo-text-base); /* default body copy */
+    --cascivo-text-body-sm: var(--cascivo-text-sm); /* secondary / dense body copy */
+    --cascivo-text-ui: var(
+      --cascivo-text-sm
+    ); /* control & button labels (the canonical "ui.default") */
+    --cascivo-text-label: var(--cascivo-text-sm); /* form field labels */
+    --cascivo-text-caption: var(--cascivo-text-xs); /* captions, helper text, metadata */
+    --cascivo-text-code: var(
+      --cascivo-text-sm
+    ); /* inline code / mono (pair with --cascivo-font-mono) */
+
+    /* ── Border Radius — Primitive ───────────────────── */
+    --cascivo-radius-none: 0px;
+    --cascivo-radius-sm: 0.25rem; /* 4px */
+    --cascivo-radius-md: 0.375rem; /* 6px */
+    --cascivo-radius-lg: 0.5rem; /* 8px */
+    --cascivo-radius-xl: 0.75rem; /* 12px */
+    --cascivo-radius-2xl: 1rem; /* 16px */
+    --cascivo-radius-full: 9999px;
+
+    /* ── Border Radius — Semantic (one-knob; themes retune --cascivo-radius-base only) ── */
+    --cascivo-radius-base: 0.375rem; /* 6px controls */
+    --cascivo-radius-control: var(--cascivo-radius-base);
+    --cascivo-radius-field: var(--cascivo-radius-base);
+    --cascivo-radius-item: calc(var(--cascivo-radius-base) * 0.66); /* ~4px menu/list rows */
+    --cascivo-radius-surface: calc(var(--cascivo-radius-base) * 1.66); /* ~10px cards */
+    --cascivo-radius-overlay: calc(var(--cascivo-radius-base) * 2); /* ~12px modals/popovers */
+    --cascivo-radius-indicator: calc(var(--cascivo-radius-base) / 2);
+
+    /* ── Interaction state opacity (HeroUI layout-token parity; themes may retune) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Shadows — rationed: surfaces flat/xs, floating layers get ONE soft shadow ── */
+    --cascivo-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.05);
+    --cascivo-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.04);
+    --cascivo-shadow-md: 0 2px 8px oklch(0 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.04);
+    --cascivo-shadow-overlay: 0 4px 32px oklch(0 0 0 / 0.16), 0 0 0 1px oklch(0 0 0 / 0.04);
+    /* legacy aliases — keep existing component CSS working */
+    --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
+    --cascivo-shadow-xl: var(--cascivo-shadow-overlay);
+
+    /* ── Focus Ring — soft halo (≥3:1 contrast) ──────── */
+    --cascivo-ring-width: 3px;
+    --cascivo-ring-offset: 0px;
+    --cascivo-ring-color: color-mix(
+      in oklch,
+      var(--cascivo-color-accent, oklch(0.623 0.214 250)) 55%,
+      transparent
+    );
+
+    /* ── Primary — semantic defaults (themes override) ── */
+    --cascivo-color-primary: oklch(0.205 0 0);
+    --cascivo-color-primary-fg: oklch(0.985 0 0);
+    --cascivo-color-primary-hover: oklch(0.27 0 0);
+    --cascivo-color-primary-active: oklch(0.32 0 0);
+    --cascivo-color-active-bg: oklch(0.145 0.005 264 / 6%);
+
+    /* ── Density Controls ────────────────────────────── */
+    /* Button is the height reference — all interactive controls derive from these.  */
+    /* Coarse pointer: use --cascivo-target-min-coarse (2.75rem/44px) via min-block-size. */
+    --cascivo-control-height-sm: 2rem; /* 32px — Button sm */
+    --cascivo-control-height-md: 2.5rem; /* 40px — Button md */
+    --cascivo-control-height-lg: 3rem; /* 48px — Button lg */
+
+    /* ── Semantic Borders ────────────────────────────── */
+    --cascivo-border-subtle: oklch(0.928 0.006 264);
+    --cascivo-border-default: oklch(0.872 0.008 264);
+    --cascivo-border-strong: oklch(0.707 0.015 264);
+
+    /* ── Animation ────────────────────────────────────── */
+    --cascivo-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --cascivo-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --cascivo-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --cascivo-duration-75: 75ms;
+    --cascivo-duration-100: 100ms;
+    --cascivo-duration-150: 150ms;
+    --cascivo-duration-200: 200ms;
+    --cascivo-duration-300: 300ms;
+    --cascivo-duration-500: 500ms;
+
+    /* Semantic motion — components reference intent, themes tune character */
+    --cascivo-motion-enter: var(--cascivo-duration-200) var(--cascivo-ease-out);
+    --cascivo-motion-exit: var(--cascivo-duration-150) var(--cascivo-ease-in);
+    --cascivo-motion-emphasis: var(--cascivo-duration-300) var(--cascivo-ease-in-out);
+
+    /* ── Chart Categorical Color Ramp ───────────────── */
+    --cascivo-chart-1: oklch(0.74 0.13 70); /* Okabe-Ito orange #E69F00 */
+    --cascivo-chart-2: oklch(0.74 0.11 240); /* Okabe-Ito sky blue #56B4E9 */
+    --cascivo-chart-3: oklch(0.66 0.13 165); /* Okabe-Ito bluish green #009E73 */
+    --cascivo-chart-4: oklch(0.93 0.16 100); /* Okabe-Ito yellow #F0E442 */
+    --cascivo-chart-5: oklch(0.5 0.13 250); /* Okabe-Ito blue #0072B2 */
+    --cascivo-chart-6: oklch(0.6 0.16 40); /* Okabe-Ito vermillion #D55E00 */
+    --cascivo-chart-7: oklch(0.66 0.12 350); /* Okabe-Ito reddish purple #CC79A7 */
+    --cascivo-chart-8: oklch(0.55 0.02 280); /* neutral grey (screen adaptation) */
+    --cascivo-chart-grid: var(--cascivo-gray-200);
+    --cascivo-chart-axis: var(--cascivo-gray-400);
+    /* Opacity of a solid area-chart fill over the surface. Light/warm surfaces are
+       near-white, so 0.25 reads as a clean tint; the dark theme raises this so the
+       fill keeps its hue instead of muddying into the dark surface. */
+    --cascivo-chart-fill-opacity: 0.25;
+
+    /* ── Code Editor (@cascivo/editor) ──────────────────────────
+       Defined once here, not per-theme, to keep theme token parity. Chrome and
+       the syntax palette reference theme-overridden semantic/chart tokens, so
+       they adapt across light/dark/warm (and every theme) automatically; the
+       literal fallbacks keep a theme-less `@cascivo/editor` import readable. */
+
+    /* Chrome */
+    --cascivo-editor-bg: var(--cascivo-color-surface, oklch(0.985 0.002 264));
+    --cascivo-editor-fg: var(--cascivo-color-foreground, oklch(0.205 0.005 264));
+    --cascivo-editor-gutter-bg: var(--cascivo-color-surface-2, oklch(0.967 0.003 264));
+    --cascivo-editor-gutter-fg: var(--cascivo-color-text-muted, oklch(0.55 0.018 264));
+    --cascivo-editor-current-line: var(--cascivo-color-active-bg, oklch(0.55 0.02 264 / 8%));
+    --cascivo-editor-selection: var(--cascivo-color-accent-muted, oklch(0.882 0.095 250));
+    --cascivo-editor-border: var(--cascivo-color-border, oklch(0.928 0.006 264));
+
+    /* Syntax palette — one token per TokenKind. String/number/type/property (and
+       their aliases regexp/attr/boolean) are pinned to text-safe darker values
+       instead of the raw chart hues, which are tuned for 3:1 fills and fall below
+       WCAG AA 4.5:1 as code text on the light editor surface. Dark-surface themes
+       restore the brighter chart hues below (they clear 4.5:1 on a dark bg). */
+    --cascivo-editor-syntax-keyword: var(--cascivo-color-accent, oklch(0.52 0.2 250));
+    --cascivo-editor-syntax-string: oklch(0.53 0.13 135);
+    --cascivo-editor-syntax-number: oklch(0.54 0.15 40);
+    --cascivo-editor-syntax-comment: var(--cascivo-color-foreground-muted, oklch(0.55 0.018 264));
+    --cascivo-editor-syntax-function: var(--cascivo-chart-5, oklch(0.5 0.16 265));
+    --cascivo-editor-syntax-type: oklch(0.54 0.12 350);
+    --cascivo-editor-syntax-operator: var(--cascivo-color-foreground-muted, oklch(0.5 0.04 264));
+    --cascivo-editor-syntax-punctuation: var(--cascivo-color-text-subtle, oklch(0.446 0.018 264));
+    --cascivo-editor-syntax-variable: var(--cascivo-editor-fg);
+    --cascivo-editor-syntax-tag: var(--cascivo-color-accent, oklch(0.52 0.2 250));
+    --cascivo-editor-syntax-attr: oklch(0.54 0.15 40);
+    --cascivo-editor-syntax-regexp: oklch(0.53 0.13 135);
+    --cascivo-editor-syntax-boolean: oklch(0.54 0.15 40);
+    --cascivo-editor-syntax-property: oklch(0.53 0.12 240);
+
+    /* ── Brand (apps/logo/OG only — never used in component CSS) ── */
+    --cascivo-brand-primary: oklch(
+      0.55 0.15 240
+    ); /* cascade blue — hero, CTA, logo gradient start */
+    --cascivo-brand-accent: oklch(0.72 0.13 195); /* flow teal — gradient end, accents */
+    --cascivo-brand-ink: oklch(
+      0.22 0.03 250
+    ); /* near-black cool — wordmark, body on brand surface */
+    --cascivo-brand-paper: oklch(0.99 0.005 250); /* off-white brand surface */
+    --cascivo-brand-gradient-start: oklch(0.55 0.15 240);
+    --cascivo-brand-gradient-end: oklch(0.72 0.13 195);
+
+    /* ── Z-Index ──────────────────────────────────────── */
+    --cascivo-z-base: 0;
+    --cascivo-z-raised: 10;
+    --cascivo-z-dropdown: 100;
+    --cascivo-z-overlay: 200;
+    --cascivo-z-modal: 300;
+    --cascivo-z-toast: 400;
+    --cascivo-z-tooltip: 500;
+
+    /* ── Shell ──────────────────────────────────────────── */
+    --cascivo-shell-header-block-size: 3rem;
+    --cascivo-shell-panel-inline-size: 20rem;
+    --cascivo-shell-aside-inline-size: 18rem;
+
+    /* ── Breakpoint Scale ────────────────────────────── */
+    /* Breakpoints are a lint-guarded constant. Use these exact values in @media/@container;    */
+    /* do NOT invent off-scale widths. @media/@container CANNOT read these custom properties — */
+    /* copy the numeric value. Canonical scale: sm=30rem md=40rem lg=64rem xl=80rem            */
+    /* Lint: scripts/checks/breakpoint.test.ts — added in v20-t2.                              */
+    --cascivo-screen-sm: 30rem; /* 480px — small phone/narrow viewport                      */
+    --cascivo-screen-md: 40rem; /* 640px — tablet/wide phone (load-bearing: columns/grid/header) */
+    --cascivo-screen-lg: 64rem; /* 1024px — desktop (load-bearing: app-shell drawer)         */
+    --cascivo-screen-xl: 80rem; /* 1280px — wide desktop                                    */
+
+    /* ── Fluid Typography ────────────────────────────── */
+    /* Additive fluid variants — fixed tokens are preserved as the static fallback.            */
+    /* clamp(min, vw-slope, max) where max = current fixed value so desktop ceiling is frozen. */
+    --cascivo-text-2xl-fluid: clamp(1.25rem, 1rem + 1.25vw, 1.5rem); /* 20→24px */
+    --cascivo-text-3xl-fluid: clamp(1.5rem, 1.125rem + 1.875vw, 1.875rem); /* 24→30px */
+    --cascivo-text-4xl-fluid: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem); /* 30→36px */
+
+    /* ── Coarse-pointer touch target ─────────────────── */
+    /* Controls should reach this minimum under @media (pointer: coarse) — added in v20-t3.   */
+    --cascivo-target-min-coarse: 2.75rem; /* 44px — Apple HIG comfortable touch target        */
+  }
+
+  /* Dark-surface themes: restore the brighter chart hues for editor syntax, which
+     clear WCAG AA 4.5:1 on a dark editor background (the light-theme darkened
+     literals above would be too low-contrast there). */
+  [data-theme='dark'],
+  [data-theme='midnight'],
+  [data-theme='terminal'],
+  [data-theme='cyberpunk'] {
+    --cascivo-editor-syntax-string: var(--cascivo-chart-3);
+    --cascivo-editor-syntax-regexp: var(--cascivo-chart-3);
+    --cascivo-editor-syntax-number: var(--cascivo-chart-6);
+    --cascivo-editor-syntax-attr: var(--cascivo-chart-6);
+    --cascivo-editor-syntax-boolean: var(--cascivo-chart-6);
+    --cascivo-editor-syntax-type: var(--cascivo-chart-7);
+    --cascivo-editor-syntax-property: var(--cascivo-chart-2);
+  }
+
+  /* All cascade motion derives from the duration tokens, so collapsing them
+     disables every transition/animation library-wide. Continuous progress
+     indicators (Spinner) use literal durations and opt out deliberately. */
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --cascivo-duration-75: 0.01ms;
+      --cascivo-duration-100: 0.01ms;
+      --cascivo-duration-150: 0.01ms;
+      --cascivo-duration-200: 0.01ms;
+      --cascivo-duration-300: 0.01ms;
+      --cascivo-duration-500: 0.01ms;
+    }
+  }
+}
+
+/*
+ * CSS @function helpers (--cascivo-step / --cascivo-scale) are NOT imported here.
+ * They are a Chrome-133+ progressive-enhancement pilot and are unparseable by
+ * current CSS minifiers (lightningcss / Tailwind v4), which choke on `@function`
+ * and drop the rule. Every call site ships a static fallback, so omitting them is
+ * always correct. Opt in explicitly if your build pipeline supports @function:
+ *   import '@cascivo/tokens/functions.css'
+ */
+
+/* packages/tokens/src/properties.css */
+/* cascivo — @property registrations for themeable color custom properties.
+ *
+ * Registering the themeable color tokens as typed custom properties (<color>,
+ * inherits) buys two things:
+ *   1. Smooth interpolation when [data-theme] changes under a transition.
+ *   2. A typed substrate for future @container style() palette branching.
+ *
+ * Only *themeable* color props are registered (the values a theme overrides or
+ * that animate), not the whole primitive scale. Registration sets the property
+ * type + initial value; theme blocks still override the value as usual.
+ *
+ * Imported by @cascivo/themes/all.css (and safe to import standalone). @property
+ * is a top-level at-rule and intentionally lives outside @layer.
+ */
+
+@property --cascivo-color-accent {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.52 0.2 250);
+}
+@property --cascivo-color-accent-hover {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.45 0.2 250);
+}
+@property --cascivo-color-accent-active {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.373 0.155 250);
+}
+@property --cascivo-color-primary {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.205 0 0);
+}
+@property --cascivo-color-primary-hover {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.27 0 0);
+}
+@property --cascivo-color-primary-active {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.32 0 0);
+}
+@property --cascivo-color-secondary {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.92 0.004 264);
+}
+@property --cascivo-color-secondary-hover {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.86 0.006 264);
+}
+@property --cascivo-color-destructive {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.54 0.188 22);
+}
+@property --cascivo-color-destructive-hover {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.448 0.17 22);
+}
+@property --cascivo-color-text-on-accent {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(1 0 0);
+}
+@property --cascivo-color-text-on-destructive {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(1 0 0);
+}
+
+/* cascivo — Base Layer */
+/* The one rule that activates the shipped font token (#6): applies
+   --cascivo-font-sans + a sane line-height/color/background to the document
+   root so plain consumer markup (headings, raw text, prose pages) renders in
+   the sans stack instead of falling back to the browser serif default.
+
+   This is NOT a full reset — it is the minimal base every consumer who imports
+   a theme should get for free. It lives in @layer cascivo.base, which sits
+   BELOW cascivo.theme and cascivo.component, so themes and components (and any
+   unlayered consumer CSS) always win.
+
+   Uses the canonical color tokens (foreground/background). Those are defined by
+   the themes, and --cascivo-font-sans by @cascivo/tokens; pair this with a theme
+   (or import @cascivo/themes/all). */
+
+@layer cascivo.base {
+  html {
+    font-family: var(--cascivo-font-sans);
+    line-height: var(--cascivo-leading-normal, 1.5);
+    color: var(--cascivo-color-foreground);
+    background-color: var(--cascivo-color-background);
+  }
+}
+
+/* cascivo — Light Theme */
+/* Minimal/sharp, neutral grays, clean lines */
+
+/* Self-imports tokens for standalone use; deduped by URL when combined (see ./all.css). */
+
+@layer cascivo.theme {
+  [data-theme='light'],
+  :root:not([data-theme]) {
+    color-scheme: light;
+
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
+    /* ── Surface ──────────────────────────────────────── */
+    --cascivo-color-background: oklch(1 0 0);
+    --cascivo-color-surface: oklch(0.985 0.002 264);
+    --cascivo-color-surface-2: oklch(0.967 0.003 264);
+    --cascivo-color-bg: var(--cascivo-color-background);
+    --cascivo-color-bg-subtle: var(--cascivo-color-surface);
+    --cascivo-color-surface-raised: var(--cascivo-color-surface);
+    --cascivo-color-surface-overlay: var(--cascivo-color-background);
+    --cascivo-color-border: var(--cascivo-gray-200);
+    --cascivo-color-border-strong: var(--cascivo-gray-300);
+    --cascivo-border-subtle: oklch(0.928 0.006 264);
+    --cascivo-border-default: oklch(0.872 0.008 264);
+    --cascivo-border-strong: oklch(0.707 0.015 264);
+
+    /* ── Text ─────────────────────────────────────────── */
+    --cascivo-color-foreground: oklch(0.145 0.005 264);
+    /* Darkened 0.554→0.5 so muted text clears WCAG AA 4.5:1 on tinted surfaces
+       (surface-2, secondary), not just white. */
+    --cascivo-color-foreground-muted: oklch(0.5 0.018 264);
+    --cascivo-color-text: var(--cascivo-color-foreground);
+    --cascivo-color-text-subtle: var(--cascivo-gray-600);
+    /* Was gray-400 (2.6:1 on white — fails). Darkened to clear 4.5:1 on every
+       light surface; drives hint/caption text across ~18 components. */
+    --cascivo-color-text-muted: oklch(0.5 0.016 264);
+    --cascivo-color-text-on-accent: oklch(1 0 0); /* static fallback */
+    --cascivo-color-text-on-destructive: oklch(1 0 0); /* static fallback */
+    /* Progressive auto-contrast: contrast-color() stored in a custom property
+   does not honor the static fallback on unsupported browsers — the var()
+   substitution keeps the invalid token and the color inherits foreground.
+   Guard the upgrade so only supporting browsers apply it. */
+    @supports (color: contrast-color(red)) {
+      & {
+        --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
+        --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
+      }
+    }
+    /* ── Accent (links, focus, info, active tint) ───────── */
+    /* L lowered 0.623→0.52 so accent-as-link-text clears WCAG 2.2 AA 4.5:1 on
+       white (was 3.55:1). Hover darkened to stay below the new base. */
+    --cascivo-color-accent: oklch(0.52 0.2 250);
+    --cascivo-color-accent-foreground: oklch(1 0 0);
+    --cascivo-color-accent-hover: oklch(0.45 0.2 250); /* static fallback */
+    --cascivo-color-accent-hover: oklch(from var(--cascivo-color-accent) 0.45 0.2 h); /* derived */
+    --cascivo-color-accent-active: var(--cascivo-blue-800);
+    --cascivo-color-accent-subtle: var(--cascivo-blue-50);
+    --cascivo-color-accent-muted: var(--cascivo-blue-100);
+
+    /* ── Primary (filled actions — monochrome, shadcn/Linear style) ── */
+    --cascivo-color-primary: oklch(0.205 0 0);
+    --cascivo-color-primary-fg: oklch(0.985 0 0);
+    --cascivo-color-primary-hover: oklch(0.27 0 0);
+    --cascivo-color-primary-active: oklch(0.32 0 0);
+    --cascivo-color-active-bg: oklch(0.145 0.005 264 / 6%);
+
+    /* ── Destructive ──────────────────────────────────── */
+    --cascivo-color-destructive: var(--cascivo-red-600);
+    --cascivo-color-destructive-hover: var(--cascivo-red-700);
+    --cascivo-color-destructive-subtle: var(--cascivo-red-50);
+
+    /* ── Semantic status colors ───────────────────────── */
+    --cascivo-color-error: oklch(0.628 0.188 22);
+    --cascivo-color-warning: oklch(0.768 0.145 75);
+    --cascivo-color-success: oklch(0.648 0.15 145);
+    --cascivo-color-success-subtle: var(--cascivo-green-50);
+    --cascivo-color-warning-subtle: var(--cascivo-orange-50);
+    --cascivo-color-info: var(--cascivo-blue-600);
+    --cascivo-color-info-subtle: var(--cascivo-blue-50);
+    /* Foreground-safe variants: darker for text on light backgrounds (WCAG AA ≥4.5:1) */
+    --cascivo-color-success-foreground: oklch(0.45 0.14 145);
+    --cascivo-color-warning-foreground: oklch(0.5 0.14 75);
+    --cascivo-color-destructive-foreground: oklch(0.448 0.17 22);
+    --cascivo-color-info-foreground: oklch(0.45 0.19 250); /* ≈6.5:1 on blue-50 */
+
+    /* ── Radius — one knob; semantic scale derives in tokens ── */
+    --cascivo-radius-base: 0.375rem; /* 6px */
+    --cascivo-radius-control: var(--cascivo-radius-base);
+    --cascivo-radius-surface: calc(var(--cascivo-radius-base) * 1.66);
+    --cascivo-radius-indicator: calc(var(--cascivo-radius-base) / 2);
+    --cascivo-radius-full: 9999px;
+    --cascivo-radius-component: var(--cascivo-radius-base);
+    --cascivo-radius-button: var(--cascivo-radius-base);
+    --cascivo-radius-input: var(--cascivo-radius-base);
+    --cascivo-radius-card: calc(var(--cascivo-radius-base) * 1.66); /* ~10px */
+    --cascivo-radius-badge: var(--cascivo-radius-full);
+    --cascivo-radius-modal: calc(var(--cascivo-radius-base) * 2); /* ~12px */
+
+    /* ── Shadows ─────────────────────────────────────── */
+    --cascivo-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.05);
+    --cascivo-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.04);
+    --cascivo-shadow-md: 0 2px 8px oklch(0 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.04);
+    --cascivo-shadow-overlay: 0 4px 32px oklch(0 0 0 / 0.16), 0 0 0 1px oklch(0 0 0 / 0.04);
+    --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
+
+    /* ── Focus ring ───────────────────────────────────── */
+    --cascivo-ring-width: 2px;
+    --cascivo-ring-offset: 0px;
+    --cascivo-ring-color: color-mix(in oklch, var(--cascivo-color-accent) 55%, transparent);
+    --cascivo-color-focus-ring: var(--cascivo-blue-500);
+    --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
+
+    /* ── Chart overrides ─────────────────────────────── */
+    --cascivo-chart-1: oklch(0.62 0.13 70);
+    --cascivo-chart-2: oklch(0.62 0.11 240);
+    --cascivo-chart-3: oklch(0.6 0.13 135);
+    --cascivo-chart-4: oklch(0.6 0.18 55);
+    --cascivo-chart-5: oklch(0.5 0.13 270);
+    --cascivo-chart-6: oklch(0.58 0.16 30);
+    --cascivo-chart-7: oklch(0.62 0.12 350);
+    --cascivo-chart-8: oklch(0.5 0.12 200);
+    --cascivo-chart-grid: var(--cascivo-gray-200);
+    /* Axis labels are text — gray-400 (2.6:1) fails; match text-muted. */
+    --cascivo-chart-axis: oklch(0.5 0.016 264);
+    --cascivo-chart-fill-opacity: 0.25;
+
+    /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
+    --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
+    --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
+    --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
+    --cascivo-color-info-content: oklch(1 0 0);
+    --cascivo-color-success-content: oklch(1 0 0);
+    --cascivo-color-warning-content: oklch(0.145 0 0);
+    --cascivo-color-error-content: oklch(1 0 0);
+
+    /* ── Secondary color role ────────────────────────── */
+    --cascivo-color-secondary: oklch(0.92 0.004 264);
+    --cascivo-color-secondary-content: oklch(0.27 0.01 264);
+    --cascivo-color-secondary-hover: oklch(0.86 0.006 264);
+    --cascivo-color-secondary-subtle: oklch(0.967 0.002 264);
+  }
+}
+
+/* cascivo — Dark Theme */
+/* Bold/editorial, high contrast, developer-cool */
+
+/* Self-imports tokens for standalone use; deduped by URL when combined (see ./all.css). */
+
+@layer cascivo.theme {
+  [data-theme='dark'] {
+    color-scheme: dark;
+
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
+    /* ── Surface ──────────────────────────────────────── */
+    --cascivo-color-background: oklch(0.145 0.005 250);
+    --cascivo-color-surface: oklch(0.185 0.007 250);
+    --cascivo-color-surface-2: oklch(0.22 0.008 250);
+    --cascivo-color-bg: var(--cascivo-color-background);
+    --cascivo-color-bg-subtle: var(--cascivo-color-surface);
+    --cascivo-color-surface-raised: var(--cascivo-color-surface-2);
+    --cascivo-color-surface-overlay: var(--cascivo-color-surface);
+    --cascivo-color-border: oklch(1 0 0 / 10%);
+    --cascivo-color-border-strong: oklch(1 0 0 / 16%);
+    --cascivo-border-subtle: oklch(1 0 0 / 0.06);
+    --cascivo-border-default: oklch(1 0 0 / 0.1);
+    --cascivo-border-strong: oklch(1 0 0 / 0.2);
+
+    /* ── Text ─────────────────────────────────────────── */
+    --cascivo-color-foreground: oklch(0.985 0.002 264);
+    --cascivo-color-foreground-muted: oklch(0.707 0.015 264);
+    --cascivo-color-text: var(--cascivo-color-foreground);
+    --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
+    --cascivo-color-text-muted: oklch(0.554 0.018 264);
+    --cascivo-color-text-on-accent: oklch(0.145 0.005 250); /* static fallback */
+    --cascivo-color-text-on-destructive: oklch(1 0 0); /* static fallback */
+    /* Progressive auto-contrast: contrast-color() stored in a custom property
+   does not honor the static fallback on unsupported browsers — the var()
+   substitution keeps the invalid token and the color inherits foreground.
+   Guard the upgrade so only supporting browsers apply it. */
+    @supports (color: contrast-color(red)) {
+      & {
+        --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
+        --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
+      }
+    }
+    /* ── Accent ───────────────────────────────────────── */
+    --cascivo-color-accent: oklch(0.65 0.2 250);
+    --cascivo-color-accent-foreground: oklch(0.145 0.005 250);
+    --cascivo-color-accent-hover: oklch(0.707 0.18 250); /* static fallback */
+    --cascivo-color-accent-hover: oklch(
+      from var(--cascivo-color-accent) 0.707 0.18 h
+    ); /* derived */
+    --cascivo-color-accent-active: oklch(0.808 0.14 250); /* static fallback */
+    --cascivo-color-accent-active: oklch(
+      from var(--cascivo-color-accent) 0.808 0.14 h
+    ); /* derived */
+    --cascivo-color-accent-subtle: oklch(0.623 0.214 250 / 0.1);
+    --cascivo-color-accent-muted: oklch(0.623 0.214 250 / 0.2);
+
+    /* ── Destructive ──────────────────────────────────── */
+    --cascivo-color-destructive: oklch(0.72 0.16 22);
+    --cascivo-color-destructive-hover: oklch(0.628 0.188 22); /* static fallback */
+    --cascivo-color-destructive-hover: oklch(
+      from var(--cascivo-color-destructive) 0.628 0.188 h
+    ); /* derived */
+    --cascivo-color-destructive-subtle: oklch(0.628 0.188 22 / 0.1);
+
+    /* ── Semantic status colors ───────────────────────── */
+    --cascivo-color-error: oklch(0.72 0.16 22);
+    --cascivo-color-warning: oklch(0.82 0.13 75);
+    --cascivo-color-success: oklch(0.72 0.13 145);
+    --cascivo-color-success-subtle: oklch(0.72 0.13 145 / 0.1);
+    --cascivo-color-warning-subtle: oklch(0.82 0.13 75 / 0.1);
+    --cascivo-color-info: oklch(0.65 0.2 250);
+    --cascivo-color-info-subtle: oklch(0.65 0.2 250 / 0.1);
+    /* Foreground-safe variants: bright for text on dark backgrounds (WCAG AA ≥4.5:1) */
+    --cascivo-color-success-foreground: oklch(0.72 0.13 145);
+    --cascivo-color-warning-foreground: oklch(0.82 0.13 75);
+    --cascivo-color-destructive-foreground: oklch(0.85 0.12 22);
+    --cascivo-color-info-foreground: oklch(0.75 0.16 250);
+
+    /* ── Primary — inverted monochrome ── */
+    --cascivo-color-primary: oklch(0.922 0 0);
+    --cascivo-color-primary-fg: oklch(0.205 0 0);
+    --cascivo-color-primary-hover: oklch(0.86 0 0);
+    --cascivo-color-primary-active: oklch(0.8 0 0);
+    --cascivo-color-active-bg: oklch(1 0 0 / 8%);
+
+    /* ── Radius — one knob; semantic scale derives in tokens ── */
+    --cascivo-radius-base: 0.375rem;
+    --cascivo-radius-control: var(--cascivo-radius-base);
+    --cascivo-radius-surface: calc(var(--cascivo-radius-base) * 1.66);
+    --cascivo-radius-indicator: calc(var(--cascivo-radius-base) / 2);
+    --cascivo-radius-full: 9999px;
+    --cascivo-radius-component: var(--cascivo-radius-base);
+    --cascivo-radius-button: var(--cascivo-radius-base);
+    --cascivo-radius-input: var(--cascivo-radius-base);
+    --cascivo-radius-card: calc(var(--cascivo-radius-base) * 1.66);
+    --cascivo-radius-badge: var(--cascivo-radius-full);
+    --cascivo-radius-modal: calc(var(--cascivo-radius-base) * 2);
+
+    /* ── Shadows — dark mode needs more opacity ────────── */
+    --cascivo-shadow-xs: none;
+    --cascivo-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.4);
+    --cascivo-shadow-md: 0 2px 8px oklch(0 0 0 / 0.45);
+    --cascivo-shadow-overlay: 0 4px 32px oklch(0 0 0 / 0.6), 0 0 0 1px oklch(1 0 0 / 0.06);
+    --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
+
+    /* ── Focus ring ───────────────────────────────────── */
+    --cascivo-ring-width: 2px;
+    --cascivo-ring-offset: 0px;
+    --cascivo-ring-color: color-mix(in oklch, var(--cascivo-color-accent) 65%, transparent);
+    --cascivo-color-focus-ring: oklch(0.65 0.2 250);
+    --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
+
+    /* ── Chart overrides ─────────────────────────────── */
+    --cascivo-chart-1: oklch(0.8 0.13 70);
+    --cascivo-chart-2: oklch(0.8 0.11 240);
+    --cascivo-chart-3: oklch(0.73 0.13 165);
+    --cascivo-chart-4: oklch(0.95 0.15 100);
+    --cascivo-chart-5: oklch(0.63 0.12 250);
+    --cascivo-chart-6: oklch(0.68 0.15 40);
+    --cascivo-chart-7: oklch(0.73 0.11 350);
+    --cascivo-chart-8: oklch(0.72 0.08 200);
+    --cascivo-chart-grid: oklch(1 0 0 / 0.06);
+    --cascivo-chart-axis: oklch(0.707 0.015 264);
+    /* Raised from the 0.25 base: a low-opacity fill over the dark surface (L≈0.185)
+       desaturates into a muddy neutral, so give area fills more presence on dark. */
+    --cascivo-chart-fill-opacity: 0.4;
+
+    /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
+    --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
+    --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
+    --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
+    --cascivo-color-info-content: oklch(0.145 0.005 250);
+    --cascivo-color-success-content: oklch(0.145 0 0);
+    --cascivo-color-warning-content: oklch(0.145 0 0);
+    --cascivo-color-error-content: oklch(0.145 0 0);
+
+    /* ── Secondary color role ────────────────────────── */
+    --cascivo-color-secondary: oklch(0.27 0.008 264);
+    --cascivo-color-secondary-content: oklch(0.9 0.004 264);
+    --cascivo-color-secondary-hover: oklch(0.32 0.01 264);
+    --cascivo-color-secondary-subtle: oklch(0.22 0.005 264);
+  }
+}
+
 @layer cascivo.component{._accordion_9ch4s_2{border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);flex-direction:column;display:flex;overflow:hidden}._item_9ch4s_10:not(:last-child){border-block-end:1px solid var(--cascivo-color-border)}._heading_9ch4s_16{font-size:inherit;font-weight:inherit;margin:0}._trigger_9ch4s_22{justify-content:space-between;align-items:center;gap:var(--cascivo-space-3);inline-size:100%;padding:var(--cascivo-space-4);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);text-align:start;color:var(--cascivo-color-text);cursor:pointer;background:0 0;border:none;display:flex}._trigger_9ch4s_22:hover{background-color:var(--cascivo-color-bg-subtle)}._trigger_9ch4s_22:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._indicator_9ch4s_48{block-size:.75rem;inline-size:.75rem;transition:rotate var(--cascivo-duration-200) var(--cascivo-ease-out);background-color:currentColor;flex-shrink:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat}._trigger_9ch4s_22[data-state=open] ._indicator_9ch4s_48{rotate:180deg}._content_9ch4s_62{visibility:hidden;color:var(--cascivo-color-text);transition:grid-template-rows var(--cascivo-duration-200) var(--cascivo-ease-out), visibility var(--cascivo-duration-200) var(--cascivo-ease-out);grid-template-rows:0fr;display:grid}._content_9ch4s_62[data-state=open]{visibility:visible;grid-template-rows:1fr}._contentInner_9ch4s_77{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);overflow:hidden}._content_9ch4s_62[data-state=open] ._contentInner_9ch4s_77{padding-inline:var(--cascivo-space-4);padding-block-end:var(--cascivo-space-4)}}@media (forced-colors:active){._accordion_9ch4s_2{border:1px solid buttontext}._trigger_9ch4s_22:focus-visible{outline-offset:2px;outline:2px solid highlight}}
 
 @layer cascivo.component{._overlay_17irl_2{z-index:var(--cascivo-z-overlay,50);padding:var(--cascivo-space-3);opacity:1;transition:opacity var(--cascivo-motion-enter);background-color:#0006;flex-direction:column;justify-content:flex-end;align-items:center;padding-block-end:calc(var(--cascivo-space-3) + env(safe-area-inset-bottom,0px));display:flex;position:fixed;inset:0}._overlay_17irl_2[data-state=closed]{opacity:0;transition:opacity var(--cascivo-motion-exit)}@starting-style{._overlay_17irl_2[data-state=open]{opacity:0}}._sheet_17irl_28{gap:var(--cascivo-space-2);inline-size:100%;max-inline-size:32rem;transition:translate var(--cascivo-motion-enter);flex-direction:column;display:flex;translate:0}._overlay_17irl_2[data-state=closed] ._sheet_17irl_28{transition:translate var(--cascivo-motion-exit);translate:0 100%}@starting-style{._overlay_17irl_2[data-state=open] ._sheet_17irl_28{translate:0 100%}}._group_17irl_50{background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);flex-direction:column;display:flex;overflow:hidden}._heading_17irl_60{padding:var(--cascivo-space-4) var(--cascivo-space-6);text-align:center;border-block-end:1px solid var(--cascivo-color-border)}._title_17irl_66{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);margin:0}._description_17irl_73{margin:var(--cascivo-space-1) 0 0;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle)}._item_17irl_79{min-block-size:3rem;inline-size:100%;padding:var(--cascivo-space-3) var(--cascivo-space-6);font-size:var(--cascivo-text-base);color:var(--cascivo-color-accent);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex}._item_17irl_79+._item_17irl_79{border-block-start:1px solid var(--cascivo-color-border)}._item_17irl_79:hover{background-color:var(--cascivo-color-bg-subtle)}._item_17irl_79:focus-visible{box-shadow:var(--cascivo-focus-ring);z-index:1;outline:none;position:relative}._item_17irl_79[aria-disabled=true]{color:var(--cascivo-color-text-muted);cursor:not-allowed}._item_17irl_79[data-destructive]{color:var(--cascivo-color-destructive)}._cancel_17irl_119{font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}@media (prefers-reduced-motion:reduce){._sheet_17irl_28{transition:none}}}