/**
 * @jax/ui Theme: josh-comeau (combined - light and dark modes)
 * Auto-generated by Terrazzo theme-presets plugin
 * Physics archetype: prompt-play
 */

/* =============================================================================
 * PHYSICS LAYER (Elevation Configuration)
 * ============================================================================= */
:root {
    --physics-surface-algorithm: linear;
    --physics-surface-delta: 0.03;
    --physics-surface-saturation-boost: 0.03;
    --physics-rim-opacity: 0;
    --physics-ring-opacity: 0.08;
    --physics-shadow-opacity: 0.15;
}

:root[data-color-scheme="dark"] {
    --physics-surface-algorithm: linear;
    --physics-surface-delta: 0.03;
    --physics-surface-saturation-boost: 0.03;
    --physics-rim-opacity: 0.12;
    --physics-ring-opacity: 0.08;
    --physics-shadow-opacity: 0.15;
}

/* =============================================================================
 * PRIMITIVE OVERRIDES (Radii, Shadows, Border Width)
 * ============================================================================= */
:root {
    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-base: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    --shadow-none: none;
    --border-width-subtle: 0.5px;
    --border-width: 1px;
    --border-width-emphasis: 2px;
}

/* =============================================================================
 * MOTION TOKENS (Personality: playful)
 * ============================================================================= */
:root {
--motion-duration-instant: 0ms;
--motion-duration-fast: 120ms;
--motion-duration-base: 240ms;
--motion-duration-moderate: 360ms;
--motion-duration-slow: 480ms;
--motion-duration-slower: 600ms;
--motion-easing-linear: linear;
--motion-easing-easeOut: cubic-bezier(0.34, 1.56, 0.64, 1);
--motion-easing-easeIn: cubic-bezier(0.36, 0, 0.66, -0.56);
--motion-easing-easeInOut: cubic-bezier(0.68, -0.2, 0.32, 1.2);
--motion-easing-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
--motion-easing-emphasizedDecelerate: cubic-bezier(0.22, 1.0, 0.36, 1);
--motion-easing-emphasizedAccelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--motion-preset-fast: 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
--motion-preset-base: 240ms cubic-bezier(0.68, -0.2, 0.32, 1.2);
--motion-preset-entrance: 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
--motion-preset-exit: 240ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
--motion-preset-complex: 480ms cubic-bezier(0.22, 1.0, 0.36, 1);
--motion-stagger-none: 0ms;
--motion-stagger-fast: 15ms;
--motion-stagger-base: 30ms;
--motion-stagger-slow: 60ms;
--motion-kinetic-neutral-ease: linear(0, 0.0169, 0.0626, 0.1301, 0.2128, 0.3052, 0.4023, 0.5001, 0.5952, 0.6851, 0.7678, 0.842, 0.907, 0.9623, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0.9989, 0.9947, 0.9914, 0.9891, 0.9876, 0.9868, 0.9866, 0.9868, 0.9875, 0.9884, 0.9895, 0.9908, 0.9921, 0.9934, 0.9946, 0.9958, 0.997, 0.9979, 0.9988, 0.9995, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
--motion-kinetic-neutral-duration: 863ms;
--motion-kinetic-expressive-ease: linear(0, 0.1325, 0.461, 0.8636, 1, 1, 1, 1, 1, 1, 0.8733, 0.7556, 0.7232, 0.7679, 0.8632, 0.975, 1, 1, 1, 1, 1, 1, 0.9599, 0.9299, 0.9237, 0.9382, 0.9657, 0.9966, 1, 1, 1, 1, 1, 1, 0.9876, 0.98, 0.979, 0.9836, 0.9915, 1, 1, 1, 1, 1, 1, 0.9998, 0.9962, 0.9943, 0.9943, 0.9957, 0.9979, 1, 1, 1, 1, 1, 1, 0.9998, 0.9989, 0.9984, 0.9984, 0.9989, 0.9995, 1, 1);
--motion-kinetic-expressive-duration: 1727ms;
}

/* =============================================================================
 * SEMANTIC TOKENS (Unlayered — overrides @layer theme base tokens)
 *
 * These MUST be outside @layer so they always win over the base tokens
 * in theme.css/tokens.css regardless of <link> source order. Tailwind v4
 * best practice: @theme/@layer theme provides defaults + utility
 * registration; per-theme combined CSS overrides from outside any layer.
 * ============================================================================= */
:root {
    --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-family-sans: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-sans: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-heading: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-family-serif: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-serif: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-accent: 'Fira Code', 'Courier New', monospace;
    --font-family-mono: 'Fira Code', 'Courier New', monospace;
    --font-mono: 'Fira Code', 'Courier New', monospace;
    --color-primary: oklch(58% 0.22 30);
    --primary: oklch(58% 0.22 30);
    --color-primary-base: oklch(58% 0.22 30);
    --color-primary-hover: oklch(52% 0.23 28);
    --color-primary-card: oklch(58% 0.22 30);
    --color-primary-foreground: oklch(100% 0 0);
    --color-primary-raised: oklch(65% 0.20 30);
    --color-primary-active: oklch(45% 0.21 28);
    --color-primary-ink: oklch(58% 0.22 30);
    --color-primary-with-alpha: oklch(58% 0.22 30) / <alpha-value>;
    --color-primary-soft: oklch(93% 0.033 30);
    --color-primary-soft-hover: oklch(87.6% 0.047 28);
    --color-primary-soft-active: oklch(82.2% 0.058 28);
    --color-primary-ghost-hover: oklch(98.4% 0.005 30);
    --color-primary-ghost-active: oklch(93% 0.033 30);
    --color-secondary: oklch(75% 0.15 195);
    --secondary: oklch(75% 0.15 195);
    --color-secondary-base: oklch(75% 0.15 195);
    --color-secondary-hover: oklch(68% 0.14 195);
    --color-secondary-card: oklch(75% 0.15 195);
    --color-secondary-foreground: oklch(18% 0.035 265);
    --color-secondary-raised: oklch(82% 0.14 195);
    --color-secondary-active: oklch(60% 0.13 195);
    --color-secondary-ink: oklch(50% 0.12 195);
    --color-secondary-with-alpha: oklch(75% 0.15 195) / <alpha-value>;
    --color-secondary-soft: oklch(93% 0.022 195);
    --color-secondary-soft-hover: oklch(87.6% 0.029 195);
    --color-secondary-soft-active: oklch(82.2% 0.036 195);
    --color-secondary-ghost-hover: oklch(98.4% 0.004 195);
    --color-secondary-ghost-active: oklch(93% 0.022 195);
    --color-accent: oklch(75% 0.15 195);
    --accent: oklch(75% 0.15 195);
    --color-accent-base: oklch(75% 0.15 195);
    --color-accent-foreground: oklch(18% 0.035 265);
    --color-accent-hover: oklch(68% 0.14 195);
    --color-accent-ink: oklch(40% 0.068 195);
    --color-accent-soft: oklch(93% 0.022 195);
    --color-accent-soft-hover: oklch(87.6% 0.029 195);
    --color-accent-soft-active: oklch(82.2% 0.041 195);
    --color-accent-ghost-hover: oklch(98.4% 0.004 195);
    --color-accent-ghost-active: oklch(93% 0.022 195);
    --surface-sunken: oklch(95% 0.005 280);
    --surface-canvas: oklch(97% 0.01 280);
    --surface-subtle: oklch(93% 0.008 280);
    --surface-card: oklch(100% 0 0);
    --surface-raised: oklch(98% 0.003 280);
    --surface-overlay: oklch(100% 0 0);
    --color-on-surface-sunken: oklch(18% 0.035 265);
    --color-on-surface-canvas: oklch(18% 0.035 265);
    --color-on-surface-subtle: oklch(45% 0.028 265);
    --color-on-surface-card: oklch(18% 0.035 265);
    --color-on-surface-raised: oklch(18% 0.035 265);
    --color-on-surface-overlay: oklch(18% 0.035 265);
    --color-foreground-primary: oklch(18% 0.035 265);
    --color-foreground: oklch(18% 0.035 265);
    --foreground: oklch(18% 0.035 265);
    --color-foreground-secondary: oklch(45% 0.028 265);
    --color-foreground-tertiary: oklch(55% 0.025 265);
    --color-foreground-muted: oklch(65% 0.020 265);
    --color-muted-foreground: oklch(65% 0.020 265);
    --muted-foreground: oklch(65% 0.020 265);
    --color-border: oklch(87% 0.008 265);
    --border: oklch(87% 0.008 265);
    --color-border-base: oklch(87% 0.008 265);
    --color-border-card: oklch(87% 0.008 265);
    --color-border-secondary: oklch(94% 0.005 265);
    --color-border-subtle: oklch(94% 0.005 265);
    --border-subtle: oklch(94% 0.005 265);
    --color-border-focus: oklch(58% 0.22 30);
    --color-neutral: oklch(92% 0.005 265);
    --color-neutral-foreground: oklch(18% 0.035 265);
    --color-neutral-hover: oklch(87% 0.008 265);
    --color-neutral-ink: oklch(40% 0.004 265);
    --color-neutral-soft: oklch(93% 0.001 265);
    --color-neutral-soft-hover: oklch(87.6% 0.002 265);
    --color-neutral-soft-active: oklch(82.2% 0.001 265);
    --color-neutral-ghost-hover: oklch(98.4% 0 265);
    --color-neutral-ghost-active: oklch(93% 0.001 265);
    --color-success: oklch(65% 0.18 150);
    --success: oklch(65% 0.18 150);
    --color-success-base: oklch(65% 0.18 150);
    --color-success-hover: oklch(70% 0.18 150);
    --color-success-card: oklch(65% 0.18 150);
    --color-success-foreground: oklch(100% 0 0);
    --color-success-raised: oklch(72% 0.18 150);
    --color-success-active: oklch(58% 0.18 150);
    --color-success-ink: oklch(65% 0.18 150);
    --color-success-soft: oklch(93% 0.027 150);
    --color-success-soft-hover: oklch(87.6% 0.037 150);
    --color-success-soft-active: oklch(82.2% 0.05 150);
    --color-success-ghost-hover: oklch(98.4% 0.004 150);
    --color-success-ghost-active: oklch(93% 0.027 150);
    --color-warning: oklch(68% 0.16 70);
    --warning: oklch(68% 0.16 70);
    --color-warning-base: oklch(68% 0.16 70);
    --color-warning-hover: oklch(72% 0.16 70);
    --color-warning-card: oklch(68% 0.16 70);
    --color-warning-foreground: oklch(100% 0 0);
    --color-warning-raised: oklch(75% 0.16 70);
    --color-warning-active: oklch(60% 0.16 70);
    --color-warning-ink: oklch(68% 0.16 70);
    --color-warning-soft: oklch(93% 0.024 70);
    --color-warning-soft-hover: oklch(87.6% 0.033 70);
    --color-warning-soft-active: oklch(82.2% 0.044 70);
    --color-warning-ghost-hover: oklch(98.4% 0.004 70);
    --color-warning-ghost-active: oklch(93% 0.024 70);
    --color-destructive: oklch(58% 0.22 30);
    --destructive: oklch(58% 0.22 30);
    --color-destructive-base: oklch(58% 0.22 30);
    --color-destructive-hover: oklch(52% 0.23 28);
    --color-destructive-card: oklch(58% 0.22 30);
    --color-destructive-foreground: oklch(100% 0 0);
    --color-destructive-raised: oklch(65% 0.20 30);
    --color-destructive-active: oklch(45% 0.21 28);
    --color-destructive-ink: oklch(58% 0.22 30);
    --color-destructive-soft: oklch(93% 0.033 30);
    --color-destructive-soft-hover: oklch(87.6% 0.047 28);
    --color-destructive-soft-active: oklch(82.2% 0.058 28);
    --color-destructive-ghost-hover: oklch(98.4% 0.005 30);
    --color-destructive-ghost-active: oklch(93% 0.033 30);
    --color-error: oklch(58% 0.22 30);
    --error: oklch(58% 0.22 30);
    --color-error-base: oklch(58% 0.22 30);
    --color-error-card: oklch(58% 0.22 30);
    --color-error-foreground: oklch(100% 0 0);
    --color-error-ink: oklch(40% 0.16 30);
    --color-error-soft: oklch(93% 0.033 30);
    --color-error-soft-hover: oklch(87.6% 0.045 30);
    --color-error-soft-active: oklch(82.2% 0.061 30);
    --color-error-ghost-hover: oklch(98.4% 0.005 30);
    --color-error-ghost-active: oklch(93% 0.033 30);
    --color-overlay-background: oklch(100% 0 0);
    --color-overlay-backdrop: oklch(18% 0.035 265 / 0.5);
    --color-effect-shadow-ambient: oklch(58% 0.22 30 / 12%);
    --color-effect-shadow-direct: oklch(58% 0.22 30 / 8%);
    --color-chart-1: oklch(55% 0.2 30);
    --color-chart-2: oklch(55% 0.116 75);
    --color-chart-3: oklch(55% 0.131 120);
    --color-chart-4: oklch(55% 0.116 165);
    --color-chart-5: oklch(55% 0.095 210);
    --color-chart-6: oklch(55% 0.181 255);
    --color-chart-7: oklch(55% 0.2 300);
    --color-chart-8: oklch(55% 0.2 345);
}

:root[data-color-scheme="dark"] {
    --color-primary: oklch(65% 0.20 30);
    --primary: oklch(65% 0.20 30);
    --color-primary-base: oklch(65% 0.20 30);
    --color-primary-hover: oklch(72% 0.19 30);
    --color-primary-card: oklch(65% 0.20 30);
    --color-primary-foreground: oklch(100% 0 0);
    --color-primary-raised: oklch(72% 0.19 30);
    --color-primary-active: oklch(80% 0.18 30);
    --color-primary-ink: oklch(85% 0.12 30);
    --color-primary-with-alpha: oklch(65% 0.20 30) / <alpha-value>;
    --color-primary-soft: oklch(22% 0.03 30);
    --color-primary-soft-hover: oklch(27.4% 0.039 30);
    --color-primary-soft-active: oklch(32.8% 0.05 30);
    --color-primary-ghost-hover: oklch(14.8% 0.005 30);
    --color-primary-ghost-active: oklch(22% 0.03 30);
    --color-secondary: oklch(80% 0.13 195);
    --secondary: oklch(80% 0.13 195);
    --color-secondary-base: oklch(80% 0.13 195);
    --color-secondary-hover: oklch(85% 0.12 195);
    --color-secondary-card: oklch(80% 0.13 195);
    --color-secondary-foreground: oklch(100% 0 0);
    --color-secondary-raised: oklch(87% 0.12 195);
    --color-secondary-active: oklch(75% 0.14 195);
    --color-secondary-ink: oklch(92% 0.10 195);
    --color-secondary-with-alpha: oklch(80% 0.13 195) / <alpha-value>;
    --color-secondary-soft: oklch(22% 0.019 195);
    --color-secondary-soft-hover: oklch(27.4% 0.024 195);
    --color-secondary-soft-active: oklch(32.8% 0.039 195);
    --color-secondary-ghost-hover: oklch(14.8% 0.003 195);
    --color-secondary-ghost-active: oklch(22% 0.019 195);
    --color-accent: oklch(82% 0.14 195);
    --accent: oklch(82% 0.14 195);
    --color-accent-base: oklch(82% 0.14 195);
    --color-accent-foreground: oklch(100% 0 0);
    --color-accent-hover: oklch(87% 0.12 195);
    --color-accent-ink: oklch(80% 0.098 195);
    --color-accent-soft: oklch(22% 0.021 195);
    --color-accent-soft-hover: oklch(27.4% 0.024 195);
    --color-accent-soft-active: oklch(32.8% 0.039 195);
    --color-accent-ghost-hover: oklch(14.8% 0.003 195);
    --color-accent-ghost-active: oklch(22% 0.021 195);
    --surface-sunken: oklch(8% 0.05 270);
    --surface-canvas: oklch(10% 0.04 270);
    --surface-subtle: oklch(14% 0.045 270);
    --surface-card: oklch(18% 0.048 270);
    --surface-raised: oklch(24% 0.050 270);
    --surface-overlay: oklch(30% 0.052 270);
    --color-on-surface-sunken: oklch(97% 0.01 280);
    --color-on-surface-canvas: oklch(97% 0.01 280);
    --color-on-surface-subtle: oklch(94% 0.008 280);
    --color-on-surface-card: oklch(97% 0.01 280);
    --color-on-surface-raised: oklch(97% 0.01 280);
    --color-on-surface-overlay: oklch(97% 0.01 280);
    --color-foreground-primary: oklch(97% 0.01 280);
    --color-foreground: oklch(97% 0.01 280);
    --foreground: oklch(97% 0.01 280);
    --color-foreground-secondary: oklch(97% 0.01 280);
    --color-foreground-tertiary: oklch(80% 0.015 265);
    --color-foreground-muted: oklch(70% 0.018 265);
    --color-muted-foreground: oklch(70% 0.018 265);
    --muted-foreground: oklch(70% 0.018 265);
    --color-border: oklch(30% 0.050 270);
    --border: oklch(30% 0.050 270);
    --color-border-base: oklch(30% 0.050 270);
    --color-border-card: oklch(30% 0.050 270);
    --color-border-secondary: oklch(22% 0.048 270);
    --color-border-subtle: oklch(22% 0.048 270);
    --border-subtle: oklch(22% 0.048 270);
    --color-border-focus: oklch(72% 0.19 30);
    --color-neutral: oklch(45% 0.028 265);
    --color-neutral-foreground: oklch(97% 0.01 280);
    --color-neutral-hover: oklch(55% 0.025 265);
    --color-neutral-ink: oklch(80% 0.02 265);
    --color-neutral-soft: oklch(22% 0.004 265);
    --color-neutral-soft-hover: oklch(27.4% 0.005 265);
    --color-neutral-soft-active: oklch(32.8% 0.008 265);
    --color-neutral-ghost-hover: oklch(14.8% 0.001 265);
    --color-neutral-ghost-active: oklch(22% 0.004 265);
    --color-success: oklch(70% 0.18 150);
    --success: oklch(70% 0.18 150);
    --color-success-base: oklch(70% 0.18 150);
    --color-success-hover: oklch(75% 0.18 150);
    --color-success-card: oklch(70% 0.18 150);
    --color-success-foreground: oklch(100% 0 0);
    --color-success-raised: oklch(77% 0.18 150);
    --color-success-active: oklch(65% 0.18 150);
    --color-success-ink: oklch(85% 0.15 150);
    --color-success-soft: oklch(22% 0.027 150);
    --color-success-soft-hover: oklch(27.4% 0.037 150);
    --color-success-soft-active: oklch(32.8% 0.05 150);
    --color-success-ghost-hover: oklch(14.8% 0.004 150);
    --color-success-ghost-active: oklch(22% 0.027 150);
    --color-warning: oklch(72% 0.16 70);
    --warning: oklch(72% 0.16 70);
    --color-warning-base: oklch(72% 0.16 70);
    --color-warning-hover: oklch(76% 0.16 70);
    --color-warning-card: oklch(72% 0.16 70);
    --color-warning-foreground: oklch(100% 0 0);
    --color-warning-raised: oklch(78% 0.16 70);
    --color-warning-active: oklch(68% 0.16 70);
    --color-warning-ink: oklch(85% 0.14 70);
    --color-warning-soft: oklch(22% 0.024 70);
    --color-warning-soft-hover: oklch(27.4% 0.033 70);
    --color-warning-soft-active: oklch(32.8% 0.044 70);
    --color-warning-ghost-hover: oklch(14.8% 0.004 70);
    --color-warning-ghost-active: oklch(22% 0.024 70);
    --color-destructive: oklch(65% 0.20 30);
    --destructive: oklch(65% 0.20 30);
    --color-destructive-base: oklch(65% 0.20 30);
    --color-destructive-hover: oklch(72% 0.19 30);
    --color-destructive-card: oklch(65% 0.20 30);
    --color-destructive-foreground: oklch(100% 0 0);
    --color-destructive-raised: oklch(72% 0.19 30);
    --color-destructive-active: oklch(80% 0.18 30);
    --color-destructive-ink: oklch(85% 0.12 30);
    --color-destructive-soft: oklch(22% 0.03 30);
    --color-destructive-soft-hover: oklch(27.4% 0.039 30);
    --color-destructive-soft-active: oklch(32.8% 0.05 30);
    --color-destructive-ghost-hover: oklch(14.8% 0.005 30);
    --color-destructive-ghost-active: oklch(22% 0.03 30);
    --color-error: oklch(65% 0.20 30);
    --error: oklch(65% 0.20 30);
    --color-error-base: oklch(65% 0.20 30);
    --color-error-card: oklch(65% 0.20 30);
    --color-error-foreground: oklch(100% 0 0);
    --color-error-ink: oklch(80% 0.115 30);
    --color-error-soft: oklch(22% 0.03 30);
    --color-error-soft-hover: oklch(27.4% 0.041 30);
    --color-error-soft-active: oklch(32.8% 0.055 30);
    --color-error-ghost-hover: oklch(14.8% 0.005 30);
    --color-error-ghost-active: oklch(22% 0.03 30);
    --color-overlay-background: oklch(10% 0.04 270);
    --color-overlay-backdrop: oklch(10% 0.04 270 / 0.8);
    --color-effect-shadow-ambient: oklch(65% 0.20 30 / 15%);
    --color-effect-shadow-direct: oklch(65% 0.20 30 / 10%);
    --color-chart-1: oklch(70% 0.192 30);
    --color-chart-2: oklch(70% 0.148 75);
    --color-chart-3: oklch(70% 0.166 120);
    --color-chart-4: oklch(70% 0.147 165);
    --color-chart-5: oklch(70% 0.121 210);
    --color-chart-6: oklch(70% 0.16 255);
    --color-chart-7: oklch(70% 0.186 300);
    --color-chart-8: oklch(70% 0.2 345);
}