@snowcone-app/ui 0.1.42 → 0.2.0

package/src/styles/globals.css

@@ -0,0 +1,1242 @@
+/**
+ * Global CSS Configuration - Tailwind v4
+ *
+ * Import order: Tailwind → Tokens → Themes
+ */
+
+@import 'tailwindcss';
+
+/* Ensure all component source files are scanned for Tailwind classes */
+@source "../**/*.tsx";
+
+@import './tokens.css';
+@import './ne-themes.css'; /* Generated from @snowcone-app/ui/themes - run `npm run generate:themes` to update */
+
+:root {
+  --font-inter: 'Inter', 'Inter Placeholder', sans-serif;
+
+  /* ==========================================================================
+   * SEMANTIC FONT ROLES
+   * ==========================================================================
+   * Theme designers can customize fonts for different UI contexts.
+   * Each role defaults to either --font-body or --font-heading, but themes
+   * can override any of them independently for fine-grained control.
+   *
+   * Example: A luxury brand might use:
+   *   - Serif heading font for titles
+   *   - Sans body font for paragraphs
+   *   - Modern sans for buttons (different from body)
+   *   - Elegant serif for display/prices
+   */
+
+  /* Primary font families - the two core fonts */
+  --font-heading: ui-sans-serif, system-ui, sans-serif;
+  --font-body: ui-sans-serif, system-ui, sans-serif;
+
+  /* Semantic font roles - default to core fonts but can be overridden */
+  --font-label: var(--font-body); /* Form labels, field names */
+  --font-button: var(--font-body); /* Button text, CTAs */
+  --font-caption: var(--font-body); /* Small text, descriptions, helper text */
+  --font-display: var(--font-heading); /* Hero text, prices, prominent numbers */
+  --font-accent: var(--font-heading); /* Emphasis, blockquotes, pullquotes */
+  --font-code: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+
+  /* Font weights - can be overridden per-role */
+  --font-weight-body: 400;
+  --font-weight-heading: 600;
+  --font-weight-button: 500;
+  --font-weight-label: 500;
+  --font-weight-caption: 400;
+  --font-weight-display: 700;
+
+  /* Override HeroUI's default font to use our font-body variable */
+  --default-font-family: var(--font-body);
+
+  /* ==========================================================================
+   * SEMANTIC RADIUS ROLES
+   * ==========================================================================
+   * Theme designers can customize border-radius for different component types.
+   * This gives each theme a distinct "shape personality" while using the same
+   * component library.
+   *
+   * Example personalities:
+   *   - Sharp/Technical: All radii set to 0 or sm
+   *   - Soft/Friendly: Buttons use full (pill), cards use 2xl
+   *   - Brutalist: Everything at 0
+   *   - Playful: Large radii with variation between components
+   *
+   * See docs/SEMANTIC_RADIUS.md for complete documentation.
+   */
+
+  /* Semantic radius roles - map to primitive radius tokens by default */
+  --radius-button: var(--radius-md); /* Buttons, chips, toggles */
+  --radius-input: var(--radius-md); /* Text inputs, selects, textareas */
+  --radius-card: var(--radius-lg); /* Cards, panels, surfaces */
+  --radius-modal: var(--radius-xl); /* Modals, dialogs, sheets */
+  --radius-badge: var(--radius-full); /* Badges, tags, status indicators */
+  --radius-avatar: var(--radius-full); /* Avatars, profile images */
+  --radius-tooltip: var(--radius-lg); /* Tooltips, popovers, dropdowns */
+  --radius-image: var(--radius-md); /* Product images, thumbnails */
+
+  /* ==========================================================================
+   * GRADIENT SYSTEM
+   * ==========================================================================
+   * Theme-aware gradients for buttons, badges, cards, and other elements.
+   * Each theme can override these to match its color palette.
+   *
+   * NOTE: --gradient-primary is intentionally NOT set in :root
+   * This means default/primary buttons use solid --primary color.
+   * Themes that want gradient buttons (Aurora, Candy) define --gradient-primary.
+   */
+
+  /* Accent gradient - alternative gradient for variety */
+  --gradient-accent: linear-gradient(135deg, var(--secondary, var(--primary)) 0%, var(--primary) 100%);
+
+  /* Subtle gradient - for backgrounds, cards */
+  --gradient-subtle: linear-gradient(180deg, var(--background) 0%, var(--surface) 100%);
+
+  /* Success/Warning/Danger gradients */
+  --gradient-success: linear-gradient(135deg, var(--success) 0%, color-mix(in oklch, var(--success) 80%, var(--primary)) 100%);
+  --gradient-warning: linear-gradient(135deg, var(--warning) 0%, color-mix(in oklch, var(--warning) 80%, var(--danger)) 100%);
+  --gradient-danger: linear-gradient(135deg, var(--danger) 0%, color-mix(in oklch, var(--danger) 80%, var(--primary)) 100%);
+
+  /* Gradient foreground - text color for gradient backgrounds */
+  --gradient-foreground: var(--primary-foreground);
+}
+
+/* Custom Themes following HeroUI pattern */
+/* IMPORTANT: Must use @layer base to override HeroUI's defaults */
+/* HeroUI declares layer order: theme, base, components, utilities */
+/* HeroUI's theme variables are in @layer base, so we must also use @layer base */
+/* Our @layer base comes after HeroUI's import, so we win by source order within the same layer */
+@layer base {
+  /*
+   * ============================================================================
+   * DEFAULT THEME - HeroUI v3 exact default colors
+   * ============================================================================
+   * Blue accent matching HeroUI's out-of-the-box defaults
+   */
+
+  /* Default Light Theme - HeroUI v3 exact defaults */
+  :root,
+  [data-theme='light'],
+  [data-theme='default'] {
+    color-scheme: light;
+
+    /* == Primitive Colors == */
+    --white: oklch(100% 0 0);
+    --black: oklch(0% 0 0);
+    --snow: oklch(0.9911 0 0);
+    --eclipse: oklch(0.2103 0.0059 285.89);
+
+    /* == HeroUI v3 Default Blue Accent == */
+    --accent: oklch(0.6204 0.195 253.83); /* HeroUI default blue */
+    --accent-foreground: var(--snow);
+    --color-text-selection: oklch(0.6204 0.195 253.83 / 0.25);
+
+    /* ===== HeroUI v3 Semantic Colors ===== */
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+
+    --default: oklch(94% 0.001 286.375);
+    --default-foreground: var(--eclipse);
+
+    --success: oklch(0.7329 0.1935 150.81);
+    --success-foreground: var(--eclipse);
+
+    --warning: oklch(0.7819 0.1585 72.33);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.6532 0.2328 25.74);
+    --danger-foreground: var(--snow);
+
+    /* ===== HeroUI v3 Layout Colors ===== */
+    --background: oklch(0.9607 0 0); /* #f5f5f5 - standardized light background */
+    --foreground: var(--eclipse);
+
+    --muted: oklch(0.5517 0.0138 285.94);
+    --divider: oklch(92% 0.004 286.32);
+    --focus: var(--accent);
+
+    /* Surface: cards, accordions, disclosure groups */
+    --surface: var(--white);
+    --surface-foreground: var(--foreground);
+    --surface-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06);
+
+    /* Overlay: tooltips, popovers, modals, menus */
+    --overlay: var(--white);
+    --overlay-foreground: var(--foreground);
+    --overlay-shadow: 0 4px 16px 0 rgba(24, 24, 27, 0.08), 0 8px 24px 0 rgba(24, 24, 27, 0.09);
+
+    /* ===== HeroUI v3 Field/Input Colors ===== */
+    --field-background: var(--white);
+    --field-foreground: var(--eclipse);
+    --field-placeholder: var(--muted);
+    --field-border: transparent;
+
+    /* Canvas Background */
+    --color-canvas-bg: #f5f5f5;
+  }
+
+  /* Default Dark Theme - HeroUI v3 exact defaults */
+  .dark,
+  [data-theme='dark'] {
+    color-scheme: dark;
+
+    /* == Primitive Colors (same in dark) == */
+    --white: oklch(100% 0 0);
+    --black: oklch(0% 0 0);
+    --snow: oklch(0.9911 0 0);
+    --eclipse: oklch(0.2103 0.0059 285.89);
+
+    /* == HeroUI v3 Default Blue Accent (same in dark) == */
+    --accent: oklch(0.6204 0.195 253.83); /* HeroUI default blue */
+    --accent-foreground: var(--snow);
+    --color-text-selection: oklch(0.6204 0.195 253.83 / 0.3);
+
+    /* ===== HeroUI v3 Semantic Colors (Dark Mode) ===== */
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+
+    --default: oklch(27.4% 0.006 286.033);
+    --default-foreground: var(--snow);
+
+    --success: oklch(0.7329 0.1935 150.81); /* Same as light */
+    --success-foreground: var(--eclipse);
+
+    --warning: oklch(0.8203 0.1388 76.34);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.594 0.1967 24.63);
+    --danger-foreground: var(--snow);
+
+    /* ===== HeroUI v3 Layout Colors (Dark Mode) ===== */
+    --background: oklch(0.07 0.002 270); /* #080809 - standardized dark background */
+    --foreground: var(--snow);
+
+    --muted: oklch(70.5% 0.015 286.067);
+    /* --divider bumped 0.32 → 0.42 to stay visible on the lifted --surface
+     * (0.30) below. At 0.32 it sat 0.02 above surface and effectively
+     * disappeared on every bordered card, drawer, and dropdown. */
+    --divider: oklch(0.42 0.006 286);
+    --focus: var(--accent);
+
+    /* Surface: cards, accordions, disclosure groups, drawer panels.
+     *
+     * Bumped from 0.21 → 0.30 so surfaces read as clearly raised against
+     * the near-black page (--background = oklch 0.07) in dark mode. The
+     * old value sat too close to the page once backdrop-blur smeared
+     * bright underlying pixels into the surface edge. 0.30 lands in iOS
+     * native sheet territory and removes the need for per-component
+     * dark-mode background overrides on drawers / popovers / dropdowns.
+     */
+    --surface: oklch(0.30 0.006 286);
+    --surface-foreground: var(--foreground);
+    --surface-shadow: 0 0 0 0 transparent inset;
+
+    /* Overlay: tooltips, popovers, modals, menus.
+     * Sits ~0.05 above --surface so overlays read as clearly elevated when
+     * they appear over a card/surface (e.g. a popover anchored to a card). */
+    --overlay: oklch(0.35 0.006 286);
+    --overlay-foreground: var(--foreground);
+    --overlay-shadow: 0 0 0 0 transparent inset;
+
+    /* ===== HeroUI v3 Field/Input Colors (Dark Mode) ===== */
+    --field-background: var(--default);
+    --field-foreground: var(--foreground);
+    --field-placeholder: var(--muted);
+    --field-border: transparent;
+
+    /* Canvas Background */
+    --color-canvas-bg: #080809;
+  }
+
+  /*
+   * ============================================================================
+   * ACCENT-ONLY THEMES (HeroUI Convention)
+   * ============================================================================
+   * These themes ONLY override accent colors. Layout colors (background,
+   * surface, etc.) are inherited from :root (light) or .dark (dark mode).
+   *
+   * COLOR METHODOLOGY:
+   * ------------------
+   * 1. LIGHT MODE: "Darker Accent, Light Text"
+   *    - Background is white/light
+   *    - Accent uses lower lightness (L ~0.6) to contrast with background
+   *    - Foreground text is WHITE (oklch(100% 0 0)) to contrast with dark accent
+   *
+   * 2. DARK MODE: "Brighter Accent, Dark Text"
+   *    - Background is black/dark
+   *    - Accent uses higher lightness (L ~0.7) to pop against dark background
+   *    - Foreground text flips to BLACK (oklch(0% 0 0)) because the accent 
+   *      is now too bright for white text
+   *
+   * Usage:
+   *   - data-theme="axis|indigo|ocean|sunset" sets the accent color
+   *   - .dark class controls light/dark mode independently
+   *   - Both can be combined: <html class="dark" data-theme="ocean">
+   */
+
+  /*
+   * AXIS THEME - Monochrome black/white accent
+   * Light mode: black accent, Dark mode: white accent
+   */
+  [data-theme='axis'] {
+    --accent: oklch(0% 0 0); /* Black */
+    --accent-foreground: oklch(100% 0 0); /* White */
+    --color-text-selection: oklch(0% 0 0 / 0.15);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+
+  .dark[data-theme='axis'] {
+    --accent: oklch(100% 0 0); /* White */
+    --accent-foreground: oklch(0% 0 0); /* Black */
+    --color-text-selection: oklch(100% 0 0 / 0.2);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+
+  /*
+   * INDIGO THEME - Purple/Indigo accent
+   */
+  [data-theme='indigo'] {
+    --accent: oklch(0.55 0.2 270);
+    --accent-foreground: oklch(100% 0 0);
+    --color-text-selection: oklch(0.55 0.2 270 / 0.25);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+
+  .dark[data-theme='indigo'] {
+    --accent: oklch(0.7 0.2 270); /* Brighter in dark mode */
+    --accent-foreground: oklch(0% 0 0); /* Dark text on bright purple */
+    --color-text-selection: oklch(0.7 0.2 270 / 0.3);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+
+  /*
+   * OCEAN THEME - Cyan/Teal accent
+   */
+  [data-theme='ocean'] {
+    --accent: oklch(0.6 0.15 200);
+    --accent-foreground: oklch(100% 0 0);
+    --color-text-selection: oklch(0.6 0.15 200 / 0.25);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+
+  .dark[data-theme='ocean'] {
+    --accent: oklch(0.7 0.15 200); /* Brighter in dark mode */
+    --accent-foreground: oklch(0% 0 0); /* Dark text on bright cyan */
+    --color-text-selection: oklch(0.7 0.15 200 / 0.3);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+
+  /*
+   * SUNSET THEME - Orange accent
+   */
+  [data-theme='sunset'] {
+    --accent: oklch(0.65 0.2 40);
+    --accent-foreground: oklch(100% 0 0);
+    --color-text-selection: oklch(0.65 0.2 40 / 0.25);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+
+  .dark[data-theme='sunset'] {
+    --accent: oklch(0.7 0.2 40); /* Brighter in dark mode */
+    --accent-foreground: oklch(0% 0 0); /* Dark text on bright orange */
+    --color-text-selection: oklch(0.7 0.2 40 / 0.3);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+
+  /*
+   * LIME THEME - Green/Lime accent
+   */
+  [data-theme='lime'] {
+    --accent: oklch(0.85 0.23 135); /* Same bright neon as dark mode */
+    --accent-foreground: oklch(0% 0 0); /* Black text */
+    --color-text-selection: oklch(0.85 0.23 135 / 0.25);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+
+  /* 
+   * SCOPED COMPONENT OVERRIDES FOR LIME THEME
+   * 
+   * The "Secondary" button variant maps to the 'default' (gray) color semantic.
+   * We want buttons to be Lime-themed, but we DON'T want to turn generic 
+   * layout elements (like Tabs, Cards, Disabled states) green.
+   * 
+   * Solution: Override '--default' ONLY for enabled buttons and chips.
+   */
+  .light[data-theme='lime']
+    button:not([role='tab']):not([disabled]):not([data-disabled='true']):not(.button--secondary):not(.button--tertiary),
+  .light[data-theme='lime']
+    [role='button']:not([role='tab']):not([disabled]):not([data-disabled='true']):not(.button--secondary):not(
+      .button--tertiary
+    ) {
+    --default: oklch(0.9 0.1 135); /* Soft Pastel Lime */
+    --default-foreground: oklch(0.4 0.15 135); /* Dark Green Text */
+  }
+
+  /*
+   * SECONDARY BUTTON OVERRIDE FOR LIME LIGHT THEME
+   *
+   * The secondary button uses: bg-default + text-accent
+   * We want the default gray background with our lime green text.
+   * oklch(0.70 0.20 135) is the brightest lime that passes WCAG AA (4.5:1 contrast).
+   */
+  .light[data-theme='lime'] .button--secondary:not([disabled]):not([data-disabled='true']) {
+    --accent: var(--default-foreground);
+  }
+
+  /*
+   * CHIP OVERRIDE FOR LIME LIGHT THEME
+   *
+   * Chips with color="accent" need dark text for readability.
+   * - chip--accent uses text-accent
+   * - chip--accent.chip--primary uses text-accent-foreground
+   * - chip--accent.chip--soft uses text-accent-soft-foreground
+   */
+  .light[data-theme='lime'] .chip--accent.chip--primary {
+    --accent-foreground: var(--default-foreground);
+  }
+
+  .light[data-theme='lime'] .chip--accent.chip--soft {
+    --accent-soft-foreground: var(--default-foreground);
+  }
+
+  .light[data-theme='lime'] .chip--accent:not(.chip--primary):not(.chip--soft) {
+    --accent: var(--default-foreground);
+  }
+
+  .dark[data-theme='lime'] {
+    --accent: oklch(0.85 0.23 135); /* Super bright electric lime */
+    --accent-foreground: oklch(0% 0 0); /* Black text on bright lime */
+    --color-text-selection: oklch(0.85 0.23 135 / 0.3);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+
+  /*
+   * Legacy theme aliases for backward compatibility
+   * Map old "theme-mode" format to new accent-only format
+   */
+  [data-theme='axis-light'] {
+    --accent: oklch(0% 0 0);
+    --accent-foreground: oklch(100% 0 0);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+  [data-theme='axis-dark'] {
+    --accent: oklch(100% 0 0);
+    --accent-foreground: oklch(0% 0 0);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+  [data-theme='indigo-light'] {
+    --accent: oklch(0.55 0.2 270);
+    --accent-foreground: oklch(100% 0 0);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+  [data-theme='indigo-dark'] {
+    --accent: oklch(0.65 0.2 270);
+    --accent-foreground: oklch(100% 0 0);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+  [data-theme='ocean-light'] {
+    --accent: oklch(0.6 0.15 200);
+    --accent-foreground: oklch(100% 0 0);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+  [data-theme='ocean-dark'] {
+    --accent: oklch(0.7 0.15 200);
+    --accent-foreground: oklch(0% 0 0);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+  [data-theme='sunset-light'] {
+    --accent: oklch(0.65 0.2 40);
+    --accent-foreground: oklch(100% 0 0);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+  [data-theme='sunset-dark'] {
+    --accent: oklch(0.7 0.2 40);
+    --accent-foreground: oklch(0% 0 0);
+    --primary: var(--accent);
+    --primary-foreground: var(--accent-foreground);
+    --focus: var(--accent);
+  }
+
+  /*
+   * CRITICAL: Ensure dependent variables use the LOCAL accent color
+   * when a theme is applied to a specific element (scoped theming).
+   */
+  [data-theme] {
+    /* Legacy accent aliases */
+    --color-accent-primary: var(--accent);
+    --color-accent-hover: var(--accent);
+    --color-accent-light: color-mix(in oklch, var(--accent) 20%, transparent);
+  }
+}
+
+/* Map to Tailwind */
+/* NOTE: Using @theme (not inline) so CSS custom properties are output consistently */
+/* This ensures bg-default compiles to var(--color-default) everywhere */
+@theme {
+  /* ===== Semantic Font Families for Tailwind ===== */
+  /* Enables: font-heading, font-body, font-label, font-button, etc. */
+  --font-family-heading: var(--font-heading);
+  --font-family-body: var(--font-body);
+  --font-family-label: var(--font-label);
+  --font-family-button: var(--font-button);
+  --font-family-caption: var(--font-caption);
+  --font-family-display: var(--font-display);
+  --font-family-accent: var(--font-accent);
+  --font-family-code: var(--font-code);
+
+  /* ===== HeroUI v3 Semantic Colors for Tailwind ===== */
+  /* Enables: bg-primary, text-primary-foreground, border-danger, etc. */
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-default: var(--default);
+  --color-default-foreground: var(--default-foreground);
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  /* ===== Core Layout Colors ===== */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-divider: var(--divider);
+  --color-focus: var(--focus);
+
+  /* ===== Semantic Field Colors (OKLCH system) ===== */
+  /*
+   * FIELD BACKGROUNDS:
+   * - --color-field: Field on page/transparent background
+   * - --color-field-on-surface: Field inside Surface/Card (set by oklch-theme.ts)
+   *
+   * Components auto-detect context via useSurface() hook
+   */
+  --color-field: var(--field);
+  --color-field-foreground: var(--field-foreground);
+  --color-field-placeholder: var(--field-placeholder);
+  --color-field-border: var(--field-border);
+
+  /* ===== Accent (kept for backward compatibility) ===== */
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  /* ===== Overlay and Surface ===== */
+  --color-overlay: var(--overlay);
+  --color-overlay-foreground: var(--overlay-foreground);
+  --shadow-overlay: var(--overlay-shadow);
+
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --shadow-surface: var(--surface-shadow);
+
+  /* ===== Status colors (aliases for backward compatibility) ===== */
+  --color-error: var(--color-status-error);
+  --color-error-foreground: var(--color-status-error-foreground);
+  --color-info: var(--color-status-info);
+  --color-info-foreground: var(--color-status-info-foreground);
+
+  /* ===== Shadcn/Radix Compatibility Aliases ===== */
+  /* Enables Shadcn components to use standard naming conventions */
+  --color-card: var(--surface);
+  --color-card-foreground: var(--surface-foreground);
+  --color-popover: var(--overlay);
+  --color-popover-foreground: var(--overlay-foreground);
+  --color-border: var(--divider);
+  --color-muted: var(--default);
+  --color-muted-foreground: oklch(from var(--foreground) l c h / 0.6);
+  --color-destructive: var(--danger);
+  --color-destructive-foreground: var(--danger-foreground);
+  --color-ring: var(--focus);
+  --color-input: var(--field-border);
+
+  /* ===== Custom Shadows (HeroUI v3 style) ===== */
+  /* Soft shadow - visible on transparent surfaces while remaining subtle */
+  --shadow-soft: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+
+  /* ===== Semantic Radius for Tailwind ===== */
+  /* Maps semantic radius roles to Tailwind's border-radius utilities */
+  /* Enables: rounded-button, rounded-input, rounded-card, etc. */
+  --radius-semantic-button: var(--radius-button);
+  --radius-semantic-input: var(--radius-input);
+  --radius-semantic-card: var(--radius-card);
+  --radius-semantic-modal: var(--radius-modal);
+  --radius-semantic-badge: var(--radius-badge);
+  --radius-semantic-avatar: var(--radius-avatar);
+  --radius-semantic-tooltip: var(--radius-tooltip);
+  --radius-semantic-image: var(--radius-image);
+}
+
+/* Configure dark mode variant */
+@variant dark (&:where(.dark, .dark *));
+
+/*
+ * ============================================================================
+ * DARK MODE THEME OVERRIDES - UNLAYERED (Highest Priority)
+ * ============================================================================
+ * These styles are outside of @layer to ensure they override HeroUI's defaults.
+ * Unlayered styles always have higher priority than layered styles.
+ */
+
+/* Dark mode accent overrides - these MUST win over HeroUI's .dark defaults */
+.dark[data-theme='axis'],
+[data-theme='axis'] .dark {
+  --accent: oklch(100% 0 0); /* White */
+  --accent-foreground: oklch(0% 0 0); /* Black */
+  --primary: var(--accent);
+  --primary-foreground: var(--accent-foreground);
+  --focus: var(--accent);
+}
+
+.dark[data-theme='indigo'],
+[data-theme='indigo'] .dark {
+  --accent: oklch(0.7 0.2 270); /* Brighter in dark mode */
+  --accent-foreground: oklch(0% 0 0); /* Dark text on bright purple */
+  --primary: var(--accent);
+  --primary-foreground: var(--accent-foreground);
+  --focus: var(--accent);
+}
+
+.dark[data-theme='ocean'],
+[data-theme='ocean'] .dark {
+  --accent: oklch(0.7 0.15 200); /* Brighter in dark mode */
+  --accent-foreground: oklch(0% 0 0); /* Dark text on bright cyan */
+  --primary: var(--accent);
+  --primary-foreground: var(--accent-foreground);
+  --focus: var(--accent);
+}
+
+.dark[data-theme='sunset'],
+[data-theme='sunset'] .dark {
+  --accent: oklch(0.7 0.2 40); /* Brighter in dark mode */
+  --accent-foreground: oklch(0% 0 0); /* Dark text on bright orange */
+  --primary: var(--accent);
+  --primary-foreground: var(--accent-foreground);
+  --focus: var(--accent);
+}
+
+.dark[data-theme='lime'],
+[data-theme='lime'] .dark {
+  --accent: oklch(0.85 0.23 135); /* Super bright electric lime */
+  --accent-foreground: oklch(0% 0 0); /* Black text on bright lime */
+  --primary: var(--accent);
+  --primary-foreground: var(--accent-foreground);
+  --focus: var(--accent);
+
+  /* Special Secondary Color for Lime Theme (Dark Mode Override) */
+  --secondary: oklch(0.3 0.15 135); /* Darker Olive Green */
+  --secondary-foreground: oklch(0.95 0.1 135); /* Light Lime Text */
+}
+
+/* =============================================================================
+ * SPECIAL THEME EFFECTS
+ * =============================================================================
+ * Custom visual effects for distinctive themes. These add shadows, borders,
+ * glows, and other visual treatments beyond basic colors.
+ */
+
+/* -----------------------------------------------------------------------------
+ * NEO BRUTALISM THEME
+ * Hard shadows, thick borders, bold multi-color palette
+ * -------------------------------------------------------------------------- */
+[data-theme='ne-neo-brutal'] {
+  /* Neo-Brutalist Color Palette - bold, clashing, vibrant */
+  --brutal-yellow: #ffde59;
+  --brutal-pink: #ff6b9d;
+  --brutal-blue: #00d4ff;
+  --brutal-green: #7fff00;
+  --brutal-orange: #ff5722;
+  --brutal-purple: #b388ff;
+  --brutal-red: #ff1744;
+  --brutal-black: #000000;
+  --brutal-white: #ffffff;
+
+  /* Brutalist shadow - hard offset, no blur */
+  --shadow-brutal: 4px 4px 0 0 var(--brutal-black);
+  --shadow-brutal-sm: 2px 2px 0 0 var(--brutal-black);
+  --shadow-brutal-lg: 6px 6px 0 0 var(--brutal-black);
+
+  /* Override soft shadow with brutal shadow */
+  --shadow-soft: var(--shadow-brutal-sm);
+
+  /* Thick borders */
+  --border-width: 3px;
+  --border-brutal-color: var(--brutal-black);
+
+  /* High contrast divider */
+  --divider: var(--brutal-black);
+
+  /* Map semantic colors to brutal palette */
+  --success: var(--brutal-green);
+  --success-foreground: var(--brutal-black);
+  --warning: var(--brutal-yellow);
+  --warning-foreground: var(--brutal-black);
+  --danger: var(--brutal-red);
+  --danger-foreground: var(--brutal-white);
+}
+
+.dark[data-theme='ne-neo-brutal-dark'],
+[data-theme='ne-neo-brutal-dark'] .dark {
+  /* Dark mode brutal palette - neon on black */
+  --brutal-yellow: #ffde59;
+  --brutal-pink: #ff6b9d;
+  --brutal-blue: #00d4ff;
+  --brutal-green: #00ff88;
+  --brutal-orange: #ff7043;
+  --brutal-purple: #e040fb;
+  --brutal-red: #ff5252;
+  --brutal-black: #000000;
+  --brutal-white: #ffffff;
+
+  /* Neon glow shadow for dark brutal */
+  --shadow-brutal: 4px 4px 0 0 var(--brutal-green);
+  --shadow-brutal-sm: 2px 2px 0 0 var(--brutal-green);
+  --shadow-brutal-lg: 6px 6px 0 0 var(--brutal-green);
+  --shadow-soft: var(--shadow-brutal-sm);
+
+  --border-width: 3px;
+  --border-brutal-color: var(--brutal-green);
+  --divider: var(--brutal-green);
+
+  /* Map semantic colors to brutal palette */
+  --success: var(--brutal-green);
+  --success-foreground: var(--brutal-black);
+  --warning: var(--brutal-yellow);
+  --warning-foreground: var(--brutal-black);
+  --danger: var(--brutal-red);
+  --danger-foreground: var(--brutal-white);
+}
+
+/* -----------------------------------------------------------------------------
+ * AURORA / GLASSMORPHISM THEME
+ * Frosted glass, gradients, soft glows, ethereal feel
+ * -------------------------------------------------------------------------- */
+[data-theme='ne-aurora'] {
+  /* Frosted glass effect */
+  --glass-blur: 12px;
+  --glass-saturation: 180%;
+  --glass-bg: rgba(255, 255, 255, 0.7);
+
+  /* Soft glow shadows */
+  --glow-primary: 0 0 20px rgba(99, 102, 241, 0.3);
+  --glow-secondary: 0 0 30px rgba(139, 92, 246, 0.2);
+
+  /* Beautiful multi-stop gradients */
+  --gradient-primary: linear-gradient(145deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+  --gradient-accent: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #6366f1 100%);
+  --gradient-subtle: linear-gradient(180deg, #f0f4ff 0%, #e0e7ff 100%);
+  --gradient-success: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
+  --gradient-foreground: #ffffff;
+
+  /* Enhanced soft shadow with glow */
+  --shadow-soft: 0 4px 20px rgba(99, 102, 241, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05);
+
+  /* Subtle border */
+  --divider: rgba(99, 102, 241, 0.2);
+}
+
+.dark[data-theme='ne-aurora-dark'],
+[data-theme='ne-aurora-dark'] .dark {
+  /* Dark frosted glass */
+  --glass-blur: 16px;
+  --glass-saturation: 150%;
+  --glass-bg: rgba(15, 10, 26, 0.8);
+
+  /* Brighter glows for dark mode */
+  --glow-primary: 0 0 30px rgba(129, 140, 248, 0.4);
+  --glow-secondary: 0 0 40px rgba(167, 139, 250, 0.3);
+
+  /* Vibrant dark mode gradients */
+  --gradient-primary: linear-gradient(145deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%);
+  --gradient-accent: linear-gradient(135deg, #f472b6 0%, #a78bfa 50%, #818cf8 100%);
+  --gradient-subtle: linear-gradient(180deg, #0f0a1a 0%, #1e1b4b 100%);
+  --gradient-success: linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
+  --gradient-foreground: #ffffff;
+
+  /* Glowing shadow */
+  --shadow-soft: 0 4px 30px rgba(129, 140, 248, 0.2), 0 0 60px rgba(139, 92, 246, 0.1);
+
+  --divider: rgba(129, 140, 248, 0.3);
+}
+
+/* -----------------------------------------------------------------------------
+ * CANDY / PLAYFUL THEME
+ * Bright colors, fun shadows, bubbly personality
+ * -------------------------------------------------------------------------- */
+[data-theme='ne-candy'] {
+  /* Playful colored shadow */
+  --shadow-candy: 0 4px 14px rgba(236, 72, 153, 0.3), 0 2px 6px rgba(249, 115, 22, 0.2);
+
+  /* Fun candy gradients - smooth pink to rose transition */
+  --gradient-primary: linear-gradient(145deg, #ec4899 0%, #f472b6 50%, #fb7185 100%);
+  --gradient-accent: linear-gradient(135deg, #fbbf24 0%, #f472b6 50%, #8b5cf6 100%);
+  --gradient-subtle: linear-gradient(180deg, #fff5f7 0%, #fdf2f8 100%);
+  --gradient-success: linear-gradient(135deg, #34d399 0%, #fbbf24 100%);
+  --gradient-warning: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
+  --gradient-danger: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
+  --gradient-foreground: #ffffff;
+
+  --shadow-soft: var(--shadow-candy);
+
+  /* Vibrant divider */
+  --divider: rgba(236, 72, 153, 0.3);
+}
+
+.dark[data-theme='ne-candy-dark'],
+[data-theme='ne-candy-dark'] .dark {
+  /* Neon candy glow */
+  --shadow-candy: 0 4px 20px rgba(244, 114, 182, 0.4), 0 0 40px rgba(251, 146, 60, 0.2);
+
+  /* Vibrant neon gradients - smooth pink to rose transition */
+  --gradient-primary: linear-gradient(145deg, #f472b6 0%, #fb7185 50%, #f9a8d4 100%);
+  --gradient-accent: linear-gradient(135deg, #facc15 0%, #f472b6 50%, #a78bfa 100%);
+  --gradient-subtle: linear-gradient(180deg, #1a0a14 0%, #2e1065 100%);
+  --gradient-success: linear-gradient(135deg, #4ade80 0%, #facc15 100%);
+  --gradient-warning: linear-gradient(135deg, #facc15 0%, #fb923c 100%);
+  --gradient-danger: linear-gradient(135deg, #fb7185 0%, #f472b6 100%);
+  --gradient-foreground: #ffffff;
+
+  --shadow-soft: var(--shadow-candy);
+
+  --divider: rgba(244, 114, 182, 0.4);
+}
+
+/* Tailwind theme customization */
+@theme {
+  /* Customize line-heights for font sizes */
+  --text-xs--line-height: 1.5;
+  --text-sm--line-height: 1.5;
+  --text-base--line-height: 1.5;
+  --text-lg--line-height: 1.5;
+  --text-xl--line-height: 1.5;
+  --text-2xl--line-height: 1.5;
+  --text-3xl--line-height: 1.5;
+  --text-4xl--line-height: 1.4;
+  --text-5xl--line-height: 1.3;
+  --text-6xl--line-height: 1.2;
+  --text-7xl--line-height: 1.1;
+  --text-8xl--line-height: 1;
+  --text-9xl--line-height: 0.9;
+
+  /* Letter spacing */
+  --text-xs--letter-spacing: -0.02em;
+  --text-sm--letter-spacing: -0.02em;
+  --text-base--letter-spacing: -0.02em;
+  --text-lg--letter-spacing: -0.02em;
+  --text-xl--letter-spacing: -0.02em;
+  --text-2xl--letter-spacing: -0.02em;
+  --text-3xl--letter-spacing: -0.03em;
+  --text-4xl--letter-spacing: -0.04em;
+  --text-5xl--letter-spacing: -0.04em;
+  --text-6xl--letter-spacing: -0.04em;
+  --text-7xl--letter-spacing: -0.04em;
+  --text-8xl--letter-spacing: -0.04em;
+  --text-9xl--letter-spacing: -0.04em;
+
+  /* Z-index scale from tokens.css */
+  --z-base: 1;
+  --z-sticky: 1000;
+  --z-dropdown: 1001;
+  --z-drawer: 10002; /* Drawers must be highest (above modals at 10000) */
+  --z-overlay: 10001; /* Drawer overlay (above modals at 10000) */
+  --z-modal: 10000;
+  --z-tooltip: 2147483647;
+
+  /* ===== Semantic Radius for Tailwind ===== */
+  /* Enables: rounded-button, rounded-input, rounded-card, etc. */
+  --radius-button: var(--radius-semantic-button);
+  --radius-input: var(--radius-semantic-input);
+  --radius-card: var(--radius-semantic-card);
+  --radius-modal: var(--radius-semantic-modal);
+  --radius-badge: var(--radius-semantic-badge);
+  --radius-avatar: var(--radius-semantic-avatar);
+  --radius-tooltip: var(--radius-semantic-tooltip);
+  --radius-image: var(--radius-semantic-image);
+
+  /* ===== Theme-specific shadow variants ===== */
+  --shadow-brutal: var(--shadow-brutal, 4px 4px 0 0 currentColor);
+  --shadow-brutal-sm: var(--shadow-brutal-sm, 2px 2px 0 0 currentColor);
+  --shadow-brutal-lg: var(--shadow-brutal-lg, 6px 6px 0 0 currentColor);
+  --shadow-glow: var(--glow-primary, 0 0 20px currentColor);
+  --shadow-candy: var(--shadow-candy, 0 4px 14px currentColor);
+}
+
+/* =============================================================================
+ * THEME-SPECIFIC UTILITY CLASSES
+ * =============================================================================
+ * Utility classes that leverage theme-specific CSS variables.
+ * These adapt automatically based on the active theme.
+ */
+
+/* Glassmorphism / Frosted glass effect */
+.glass {
+  background: var(--glass-bg, rgba(255, 255, 255, 0.7));
+  backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturation, 180%));
+}
+
+/* Gradient background using theme primary gradient */
+.bg-gradient-primary {
+  background: var(--gradient-primary, linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%));
+}
+
+/* Text color for gradient backgrounds */
+.text-gradient-foreground {
+  color: var(--gradient-foreground, var(--primary-foreground));
+}
+
+/* Auto-gradient primary button: uses gradient if theme defines one, otherwise solid primary */
+.btn-primary-auto {
+  background: var(--gradient-primary, var(--primary));
+}
+
+/* Glow effect using theme glow */
+.shadow-glow {
+  box-shadow: var(--glow-primary, 0 0 20px rgba(99, 102, 241, 0.3));
+}
+
+/* Soft shadow - now defined in utilities.css (imported by apps) */
+/* Variable --shadow-soft is set in :root above and can be overridden by themes */
+
+/* Brutal shadow for neo-brutalism */
+.shadow-brutal {
+  box-shadow: var(--shadow-brutal, 4px 4px 0 0 currentColor);
+}
+
+.shadow-brutal-sm {
+  box-shadow: var(--shadow-brutal-sm, 2px 2px 0 0 currentColor);
+}
+
+.shadow-brutal-lg {
+  box-shadow: var(--shadow-brutal-lg, 6px 6px 0 0 currentColor);
+}
+
+/* Thick border for brutalism */
+.border-brutal {
+  border-width: var(--border-width, 3px);
+  border-style: solid;
+  border-color: var(--border-brutal-color, currentColor);
+}
+
+/* -----------------------------------------------------------------------------
+ * FIXED RADIUS UTILITIES
+ * Use these when an element MUST maintain a specific radius regardless of theme.
+ *
+ * When to use:
+ * - Heart/favorite buttons that should always be circular
+ * - Avatar placeholders that must stay round in brutalist themes
+ * - Any element where the shape is functional, not aesthetic
+ *
+ * Pattern: .rounded-fixed-{size}
+ * These use !important to override theme styles intentionally.
+ * -------------------------------------------------------------------------- */
+.rounded-fixed-full {
+  border-radius: 9999px !important;
+}
+
+.rounded-fixed-none {
+  border-radius: 0 !important;
+}
+
+/* -----------------------------------------------------------------------------
+ * Neo-Brutalist Color Utilities
+ * Use these classes to access the brutal color palette
+ * -------------------------------------------------------------------------- */
+
+/* Background colors */
+.bg-brutal-yellow { background-color: var(--brutal-yellow, #ffde59); }
+.bg-brutal-pink { background-color: var(--brutal-pink, #ff6b9d); }
+.bg-brutal-blue { background-color: var(--brutal-blue, #00d4ff); }
+.bg-brutal-green { background-color: var(--brutal-green, #7fff00); }
+.bg-brutal-orange { background-color: var(--brutal-orange, #ff5722); }
+.bg-brutal-purple { background-color: var(--brutal-purple, #b388ff); }
+.bg-brutal-red { background-color: var(--brutal-red, #ff1744); }
+.bg-brutal-black { background-color: var(--brutal-black, #000000); }
+.bg-brutal-white { background-color: var(--brutal-white, #ffffff); }
+
+/* Text colors */
+.text-brutal-yellow { color: var(--brutal-yellow, #ffde59); }
+.text-brutal-pink { color: var(--brutal-pink, #ff6b9d); }
+.text-brutal-blue { color: var(--brutal-blue, #00d4ff); }
+.text-brutal-green { color: var(--brutal-green, #7fff00); }
+.text-brutal-orange { color: var(--brutal-orange, #ff5722); }
+.text-brutal-purple { color: var(--brutal-purple, #b388ff); }
+.text-brutal-red { color: var(--brutal-red, #ff1744); }
+.text-brutal-black { color: var(--brutal-black, #000000); }
+.text-brutal-white { color: var(--brutal-white, #ffffff); }
+
+/* Border colors */
+.border-brutal-yellow { border-color: var(--brutal-yellow, #ffde59); }
+.border-brutal-pink { border-color: var(--brutal-pink, #ff6b9d); }
+.border-brutal-blue { border-color: var(--brutal-blue, #00d4ff); }
+.border-brutal-green { border-color: var(--brutal-green, #7fff00); }
+.border-brutal-orange { border-color: var(--brutal-orange, #ff5722); }
+.border-brutal-purple { border-color: var(--brutal-purple, #b388ff); }
+.border-brutal-red { border-color: var(--brutal-red, #ff1744); }
+.border-brutal-black { border-color: var(--brutal-black, #000000); }
+.border-brutal-white { border-color: var(--brutal-white, #ffffff); }
+
+/* Shadow with specific brutal colors */
+.shadow-brutal-yellow { box-shadow: 4px 4px 0 0 var(--brutal-yellow, #ffde59); }
+.shadow-brutal-pink { box-shadow: 4px 4px 0 0 var(--brutal-pink, #ff6b9d); }
+.shadow-brutal-blue { box-shadow: 4px 4px 0 0 var(--brutal-blue, #00d4ff); }
+.shadow-brutal-green { box-shadow: 4px 4px 0 0 var(--brutal-green, #7fff00); }
+.shadow-brutal-orange { box-shadow: 4px 4px 0 0 var(--brutal-orange, #ff5722); }
+.shadow-brutal-purple { box-shadow: 4px 4px 0 0 var(--brutal-purple, #b388ff); }
+.shadow-brutal-red { box-shadow: 4px 4px 0 0 var(--brutal-red, #ff1744); }
+.shadow-brutal-black { box-shadow: 4px 4px 0 0 var(--brutal-black, #000000); }
+
+/* ===== Radix UI Animation Keyframes ===== */
+/* Used by Accordion, Collapsible, and other collapsible components */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* Apply Inter font features and tighter letter spacing globally */
+@layer theme {
+  :root {
+    font-feature-settings:
+      'blwf' 1,
+      'cv03' 1,
+      'cv04' 1,
+      'cv09' 1,
+      'cv11' 1;
+  }
+}
+
+body {
+  font-family: var(--font-inter);
+  font-feature-settings:
+    'blwf' 1,
+    'cv03' 1,
+    'cv04' 1,
+    'cv09' 1,
+    'cv11' 1;
+
+  /* iOS 26+ Safari: Required for position:absolute backdrops to cover full viewport */
+  /* See: https://base-ui.com/react/overview/quick-start#ios-26-safari */
+  position: relative;
+}
+
+/* Legacy CSS variables for panels/drawers/modals */
+:root {
+  /* Background Colors - aligned with HeroUI v3 defaults */
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f5f5f5; /* HeroUI default background (neutral-100) */
+  --color-bg-tertiary: #fafafa;
+  --color-bg-input: #f3f4f6;
+  --color-bg-hover: #f1f5f9;
+  --color-bg-active: #e5f7d6;
+
+  /* Text Colors */
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #111827;
+  --color-text-tertiary: #1f2937;
+  --color-text-muted: #64748b;
+  --color-text-subtle: #6b7280;
+  --color-text-placeholder: #9ca3af;
+
+  /* Border Colors */
+  --color-border-primary: #e5e7eb;
+  --color-border-secondary: #d1d5db;
+  --color-border-focus: #94a3b8;
+  --color-border-hover: #d1d5db;
+
+  /* Accent Colors - Map to HeroUI theme */
+  --color-accent-primary: var(--accent);
+  --color-accent-hover: var(--accent);
+  --color-accent-light: color-mix(in oklch, var(--accent) 20%, transparent);
+
+  /* Status Colors - HeroUI v3 exact semantic colors */
+  --color-status-success: oklch(0.7329 0.1935 150.81); /* HeroUI success green */
+  --color-status-success-foreground: oklch(0.2103 0.0059 285.89); /* Eclipse (dark text) */
+  --color-status-warning: oklch(0.7819 0.1585 72.33); /* HeroUI warning amber */
+  --color-status-warning-foreground: oklch(0.2103 0.0059 285.89); /* Eclipse (dark text) */
+  --color-status-error: oklch(0.6532 0.2328 25.74); /* HeroUI danger red */
+  --color-status-error-foreground: oklch(0.9911 0 0); /* Snow (light text) */
+  --color-status-info: oklch(0.6204 0.195 253.83); /* HeroUI accent blue */
+  --color-status-info-foreground: oklch(0.9911 0 0); /* Snow (light text) */
+
+  /* Drawer/Panel backgrounds */
+  --color-drawer-bg: #ffffff;
+  --color-drawer-handle: #d1d5db;
+  --gradient-drawer-overlay: rgba(0, 0, 0, 0.4);
+}
+
+.dark {
+  /* Background Colors - aligned with HeroUI v3 defaults */
+  --color-bg-primary: #080809; /* Standardized dark background */
+  --color-bg-secondary: #18181b; /* zinc-900 */
+  --color-bg-tertiary: #333333;
+  --color-bg-input: #242424;
+  --color-bg-hover: #3a3a3a;
+  --color-bg-active: #4a4a4a;
+
+  /* Text Colors */
+  --color-text-primary: #f1f5f9;
+  --color-text-secondary: #e2e8f0;
+  --color-text-tertiary: #cbd5e1;
+  --color-text-muted: #94a3b8;
+  --color-text-subtle: #64748b;
+  --color-text-placeholder: #475569;
+
+  /* Border Colors — bumped to stay visible on the lifted --surface
+   * (oklch 0.30). The previous values (#3a3a3a ≈ oklch 0.31) sat at the
+   * same lightness as the new surface and disappeared on every bordered
+   * card, drawer, and dropdown. */
+  --color-border-primary: #545454;   /* ≈ oklch 0.42 */
+  --color-border-secondary: #5f5f5f; /* ≈ oklch 0.46 */
+  --color-border-focus: #6e7f96;     /* unchanged role; nudged slightly */
+  --color-border-hover: #6a6a6a;     /* ≈ oklch 0.50 */
+
+  /* Accent Colors - Map to HeroUI theme */
+  --color-accent-primary: var(--accent);
+  --color-accent-hover: var(--accent);
+  --color-accent-light: color-mix(in oklch, var(--accent) 20%, transparent);
+
+  /* Status Colors - HeroUI v3 exact semantic colors (dark mode) */
+  --color-status-success: oklch(0.7329 0.1935 150.81); /* HeroUI success green (same) */
+  --color-status-success-foreground: oklch(0.2103 0.0059 285.89); /* Eclipse (dark text) */
+  --color-status-warning: oklch(0.8203 0.1388 76.34); /* HeroUI warning amber (brighter) */
+  --color-status-warning-foreground: oklch(0.2103 0.0059 285.89); /* Eclipse (dark text) */
+  --color-status-error: oklch(0.594 0.1967 24.63); /* HeroUI danger red (dark mode) */
+  --color-status-error-foreground: oklch(0.9911 0 0); /* Snow (light text) */
+  --color-status-info: oklch(0.6204 0.195 253.83); /* HeroUI accent blue */
+  --color-status-info-foreground: oklch(0.9911 0 0); /* Snow (light text) */
+
+  /* Tailwind v4 color mappings (must be defined here for proper cascade) */
+  --color-default: var(--default);
+  --color-default-foreground: var(--default-foreground);
+
+  /* Drawer/Panel backgrounds */
+  --color-drawer-bg: #1a1a1a;
+  --color-drawer-handle: #444444;
+  --gradient-drawer-overlay: rgba(0, 0, 0, 0.6);
+}
+
+/* Component Overrides */
+@layer components {
+  /**
+   * Slider Thumb - Override HeroUI's hardcoded white background
+   * Use --accent-foreground to ensure contrast with black/white accent colors
+   *
+   * Light mode: accent is black → thumb is white
+   * Dark mode: accent is white → thumb is black
+   */
+  .slider__thumb::after {
+    background: var(--accent-foreground) !important;
+  }
+
+  /**
+   * Slider No Fill - Hide track endcaps when there's no fill
+   * Add 'slider-no-fill' class to hide the accent-colored borders at track edges
+   */
+  .slider.slider-no-fill .slider__track {
+    border-left-color: transparent !important;
+    border-right-color: transparent !important;
+    border-top-color: transparent !important;
+    border-bottom-color: transparent !important;
+  }
+
+  /* Enhanced visibility when on Surface components */
+  .surface .slider.slider-no-fill .slider__track {
+    background: rgba(0, 0, 0, 0.15) !important;
+  }
+
+  .dark .surface .slider.slider-no-fill .slider__track {
+    background: rgba(255, 255, 255, 0.15) !important;
+  }
+}
+
+/* Accessibility Utilities */
+@layer utilities {
+  /* Screen reader only - visually hidden but accessible to screen readers */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+/* View Transitions API - Theme Toggle Animation */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}