/* ============ */
/* Dark Mode Theme - Root Color Variables */
/* ============ */
/* This file defines all color variables for dark mode with dark blue emphasis */
/* All colors across the website should reference these variables */

.dark-mode {
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-instrument-serif: "Instrument Serif", serif;

  /* Base color palette (dark) - Circuit System - Match landing page */
  --background: #1a1a1f;  /* Lighter grey */
  --foreground: #e5e5eb;  /* Info text */
  --card: #25252a;  /* Lighter grey surface */
  --card-foreground: #e5e5eb;
  --popover: #25252a;
  --popover-foreground: #e5e5eb;
  --primary: #a855f7;  /* Same purple as onboarding - transparent and minimalistic */
  --primary-foreground: #000000;
  --secondary: #2a2a2f;  /* Lighter elevated surface */
  --secondary-foreground: #e5e5eb;
  --muted: #2a2a2f;
  --muted-foreground: #a0a0b0;  /* Info muted */
  --accent: #a855f7;  /* Same purple as onboarding */
  --accent-foreground: #ffffff;
  --destructive: hsl(0 80% 40%);
  --destructive-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.08);  /* Neutral grey border */
  --input: rgba(255, 255, 255, 0.08);
  --ring: rgba(255, 255, 255, 0.2);  /* Grey focus ring */
  --chart-1: hsl(10 60% 50%);
  --chart-2: hsl(34 60% 50%);
  --chart-3: hsl(58 60% 50%);
  --chart-4: hsl(82 60% 50%);
  --chart-5: hsl(106 60% 50%);
  --sidebar: #1f1f24;  /* Lighter grey */
  --sidebar-foreground: #e5e5eb;
  --sidebar-primary: #a855f7;  /* Same purple as onboarding */
  --sidebar-primary-foreground: #000000;
  --sidebar-accent: #a855f7;  /* Same purple as onboarding */
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);  /* Grey border */
  --sidebar-ring: rgba(255, 255, 255, 0.2);  /* Grey focus ring */
  --font-sans: Inter, sans-serif;
  --font-serif: Source Serif 4, serif;
  --font-mono: JetBrains Mono, monospace;
  
  /* Border Radius - Reference tokens */
  --radius: var(--radius-md, 12px);
  --radius-pill: var(--radius-pill, 999px);
  
  /* Shadows - Circuit System (reduced intensity, dark grey instead of black) */
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 4px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.08;
  --shadow-color: rgba(20, 20, 25, 0.3);
  --shadow-2xs: 0 1px 2px rgba(20, 20, 25, 0.2);
  --shadow-xs: 0 1px 3px rgba(20, 20, 25, 0.25);
  --shadow-sm: 0 2px 4px rgba(20, 20, 25, 0.2);
  --shadow: 0 2px 6px rgba(20, 20, 25, 0.25);
  --shadow-md: 0 4px 8px rgba(20, 20, 25, 0.25);
  --shadow-lg: 0 6px 12px rgba(20, 20, 25, 0.3);
  --shadow-xl: 0 8px 16px rgba(20, 20, 25, 0.3);
  --shadow-2xl: 0 12px 24px rgba(20, 20, 25, 0.35);
  --shadow-primary: 0 0 20px rgba(255, 255, 255, 0.08);  /* Subtle white glow */
  --shadow-primary-hover: 0 0 30px rgba(255, 255, 255, 0.12);
  
  /* Typography - Reference tokens */
  --tracking-normal: var(--tracking-normal, 0);
  --spacing: var(--space-1, 0.5rem);
  
  /* Transitions - Reference tokens */
  --transition-fast: var(--transition-fast, 150ms ease);
  --transition-normal: var(--transition-normal, 250ms ease);
  --transition-slow: var(--transition-slow, 350ms ease);

  /* Legacy aliases - White primary with purple accents only (matching landing page buttons) */
  --color-primary: var(--foreground);  /* White text instead of purple */
  --color-primary-hover: var(--foreground);  /* White on hover */
  --color-primary-light: var(--secondary);
  --color-primary-dark: var(--foreground);
  --color-primary-glow: rgba(168, 85, 247, 0.1);  /* Purple glow */
  --color-secondary: var(--secondary);
  --color-accent: var(--accent);  /* Purple accent only */
  --color-success: var(--chart-4);
  --color-warning: var(--chart-5);
  --color-error: var(--destructive);
  --color-info: var(--chart-2);
  --color-purple: #a855f7;  /* Purple for accents only */
  --color-purple-light: rgba(168, 85, 247, 0.1);  /* Purple background */
  --color-purple-dark: rgba(168, 85, 247, 0.4);  /* Purple border */
  --color-purple-glow: rgba(168, 85, 247, 0.1);  /* Purple glow */
  
  /* Signal purple - accents only, matching landing page buttons exactly */
  --signal-purple: #a855f7;  /* Purple base for accents */
  --signal-purple-dim: rgba(168, 85, 247, 0.1);  /* Purple background */
  --signal-purple-glow: rgba(168, 85, 247, 0.1);  /* Purple background for glow */
  --signal-purple-edge: rgba(168, 85, 247, 0.4);  /* Purple border */
  
  /* Additional color variety */
  --color-blue: hsl(210 60% 55%);
  --color-blue-light: hsl(210 60% 65%);
  --color-blue-dark: hsl(210 60% 45%);
  --color-green: hsl(142 60% 50%);
  --color-green-light: hsl(142 60% 60%);
  --color-green-dark: hsl(142 60% 40%);
  --color-orange: hsl(38 80% 55%);
  --color-orange-light: hsl(38 80% 65%);
  --color-orange-dark: hsl(38 80% 45%);
  --color-teal: hsl(180 60% 50%);
  --color-teal-light: hsl(180 60% 60%);
  --color-teal-dark: hsl(180 60% 40%);
  --color-cyan: hsl(195 70% 55%);
  --color-cyan-light: hsl(195 70% 65%);
  --color-cyan-dark: hsl(195 70% 45%);

  /* Surfaces - Circuit System */
  --bg-primary: var(--background);  /* #0f0f12 */
  --bg-secondary: var(--card);  /* #1a1a1f */
  --bg-tertiary: var(--muted);  /* #1f1f24 */
  --bg-muted: var(--muted);
  --bg-accent: var(--accent);
  --surface-deep: #1a1a1f;  /* Lighter grey */
  --surface-elevated: #25252a;  /* Lighter surface */
  --surface-overlay: #2a2a2f;  /* Lighter elevated */
  --surface-hover: color-mix(in srgb, var(--surface-elevated) 90%, rgba(255, 255, 255, 0.05) 10%);
  --bg-overlay: rgba(20, 20, 25, 0.75);  /* Lighter dark grey overlay */
  --bg-glass: rgba(26, 26, 31, 0.82);
  --bg-gradient-start: var(--background);
  --bg-gradient-end: var(--surface-elevated);
  --bg-gradient-primary: var(--surface-deep);
  --bg-gradient-accent: var(--accent);
  --bg-gradient-hero: var(--background);

  /* Typography */
  --text-primary: var(--foreground);
  --text-secondary: var(--accent-foreground);
  --text-muted: var(--muted-foreground);
  --text-soft: #b8b8d8;
  --text-inverse: var(--background);
  --text-on-primary: var(--primary-foreground);
  --text-on-dark: var(--foreground);

  /* Borders & dividers - Circuit System (Grey-based) */
  --border-light: rgba(255, 255, 255, 0.08);  /* Neutral grey border */
  --border-medium: rgba(255, 255, 255, 0.12);
  --border-dark: rgba(255, 255, 255, 0.05);
  --border-primary: rgba(168, 85, 247, 0.4);  /* Purple border */
  --border-primary-hover: rgba(168, 85, 247, 0.4);  /* Purple border */
  --divider-color: rgba(255, 255, 255, 0.08);
  --divider-color-light: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.08);  /* Neutral grey border */
  --glass-border: rgba(255, 255, 255, 0.12);

  /* Components */
  --card-bg: var(--card);
  --card-shadow: var(--shadow);
  --card-hover-shadow: var(--shadow-lg);
  --stat-card-bg: var(--card);
  --feature-card-bg: var(--card);
  --pricing-card-bg: var(--card);
  --testimonial-card-bg: var(--card);
  --section-highlight-bg: var(--sidebar);
  --section-highlight-text: var(--foreground);
  --cta-panel-bg: var(--accent);
  --cta-panel-shadow: 0 40px 70px rgba(168, 85, 247, 0.1);  /* Purple glow */

  /* Navigation & footer - Circuit System */
  --nav-bg: rgba(31, 31, 36, 0.92);  /* Lighter grey */
  --nav-bg-transparent: rgba(31, 31, 36, 0.45);
  --nav-border: rgba(255, 255, 255, 0.08);  /* Grey border */
  --nav-link-hover: rgba(255, 255, 255, 0.05);  /* Grey hover */
  --footer-bg: #1f1f24;  /* Lighter grey */
  --footer-border: var(--border-light);
  --footer-text: var(--text-muted);

  /* Buttons - Circuit System */
  --btn-primary-bg: var(--brand-accent-bg);
  --btn-primary-text: #ffffff;
  --btn-primary-border: var(--brand-accent-border);
  --btn-primary-hover-bg: var(--brand-accent-bg-hover);
  --btn-primary-border-hover: var(--brand-accent-border-hover);
  --btn-primary-shadow: none;  /* Calm by default */
  --btn-primary-shadow-hover: 0 0 20px var(--brand-accent-glow);
  --btn-outline-text: var(--text-primary);
  --btn-outline-border: var(--border-light);
  --btn-outline-hover-bg: var(--surface-hover);
  --btn-outline-border-hover: var(--border-medium);
  --btn-ghost-bg: transparent;
  --btn-ghost-text: var(--text-primary);
  --btn-ghost-border: var(--border-light);
  --btn-ghost-border-hover: var(--border-medium);
  --btn-ghost-hover-bg: var(--surface-hover);
  --btn-ghost-hover-text: var(--text-primary);
  --focus-ring: rgba(255, 255, 255, 0.22);
  --focus-glow: rgba(255, 255, 255, 0.08);

  /* Alerts */
  --alert-success-bg: rgba(77, 182, 172, 0.5);
  --alert-success-text: var(--chart-4);
  --alert-success-border: hsl(199 89% 60% / 0.35);
  --alert-error-bg: rgba(255, 84, 112, 0.45);
  --alert-error-text: var(--destructive-foreground);
  --alert-error-border: rgba(255, 84, 112, 0.65);
  --alert-warning-bg: rgba(255, 121, 198, 0.45);
  --alert-warning-text: var(--chart-5);
  --alert-warning-border: rgba(255, 121, 198, 0.55);
  --alert-info-bg: rgba(168, 85, 247, 0.1);  /* Purple background */
  --alert-info-text: var(--foreground);  /* White text */
  --alert-info-border: rgba(168, 85, 247, 0.4);  /* Purple border */

  /* Badges / chips / icons */
  --badge-bg: hsl(230 10% 20% / 0.5);
  --badge-text: var(--foreground);  /* White text */
  --chip-bg: hsl(230 10% 20% / 0.5);
  --chip-text: var(--foreground);  /* White text */
  --icon-primary: var(--foreground);  /* White icons */
  --icon-secondary: var(--text-muted);
  --icon-accent: var(--foreground);  /* White icons */
  --badge-success-bg: rgba(77, 182, 172, 0.1);

  /* Inputs */
  --input-bg: var(--card);
  --input-border: var(--border-medium);
  --input-border-focus: var(--primary);
  --input-text: var(--foreground);
  --input-placeholder: var(--text-muted);

  /* Timeline / steps */
  --step-number-bg: var(--surface-elevated);  /* Grey background */
  --step-number-shadow: 0 20px 40px rgba(20, 20, 25, 0.3);

  /* Utility */
  --backdrop-blur: saturate(180%) blur(18px);
}
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: var(--radius-sm, 8px);
  --radius-md: var(--radius-md, 12px);
  --radius-lg: var(--radius-lg, 16px);
  --radius-xl: var(--radius-xl, 20px);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

/* Apply dark mode styling globally */
/* Dark-mode background handled via style.css; avoid global gradients here. */

/* Default to dark mode, but allow light mode override */
* {
  color-scheme: dark;
}

/* ============ */
/* Light Mode Theme - Root Color Variables */
/* ============ */
.light-mode {
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-instrument-serif: "Instrument Serif", serif;

  /* Base color palette (light) - crisp, high-contrast, slightly cool */
  --background: hsl(225 25% 97%);
  --foreground: hsl(222 30% 14%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(222 30% 14%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(222 30% 14%);
  --primary: #a855f7;  /* Same purple as onboarding */
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(225 25% 93%);
  --secondary-foreground: hsl(220 10% 20%);
  --muted: hsl(225 25% 93%);
  --muted-foreground: hsl(222 10% 44%);
  --accent: #a855f7;  /* Same purple as onboarding */
  --accent-foreground: hsl(0 0% 100%);
  --destructive: hsl(0 80% 60%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(222 18% 86%);
  --input: hsl(222 18% 86%);
  --ring: #a855f7;
  --chart-1: hsl(10 60% 50%);
  --chart-2: hsl(34 60% 50%);
  --chart-3: hsl(58 60% 50%);
  --chart-4: hsl(82 60% 50%);
  --chart-5: hsl(106 60% 50%);
  --sidebar: hsl(225 25% 98%);
  --sidebar-foreground: hsl(222 30% 14%);
  --sidebar-primary: #a855f7;  /* Same purple as onboarding */
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: #a855f7;  /* Same purple as onboarding */
  --sidebar-accent-foreground: hsl(0 0% 100%);
  --sidebar-border: hsl(222 18% 86%);
  --sidebar-ring: #a855f7;
  --font-sans: Inter, sans-serif;
  --font-serif: Source Serif 4, serif;
  --font-mono: JetBrains Mono, monospace;
  
  /* Border Radius - Reference tokens */
  --radius: var(--radius-md, 12px);
  --radius-pill: var(--radius-pill, 999px);
  
  /* Shadows - Lighter for light mode */
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 6px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.08;
  --shadow-color: oklch(0.5 0.02 260);
  --shadow-2xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.08);
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.18);
  --shadow-2xl: 0 32px 70px rgba(0, 0, 0, 0.2);
  --shadow-primary: 0 18px 35px rgba(168, 85, 247, 0.15);  /* Landing page button hover shadow */
  --shadow-primary-hover: 0 24px 45px rgba(168, 85, 247, 0.15);  /* Landing page button hover shadow */
  
  /* Typography - Reference tokens */
  --tracking-normal: var(--tracking-normal, 0);
  --spacing: var(--space-1, 0.5rem);
  
  /* Transitions - Reference tokens */
  --transition-fast: var(--transition-fast, 150ms ease);
  --transition-normal: var(--transition-normal, 250ms ease);
  --transition-slow: var(--transition-slow, 350ms ease);

  /* Legacy aliases - White primary with purple accents only */
  --color-primary: var(--foreground);  /* White text instead of purple */
  --color-primary-hover: var(--foreground);  /* White on hover */
  --color-primary-light: var(--secondary);
  --color-primary-dark: var(--foreground);
  --color-primary-glow: rgba(168, 85, 247, 0.1);  /* Purple glow */
  --color-secondary: var(--secondary);
  --color-accent: var(--accent);  /* Purple accent only */
  --color-success: var(--chart-4);
  --color-warning: var(--chart-5);
  --color-error: var(--destructive);
  --color-info: var(--chart-2);
  --color-purple: #a855f7;  /* Purple for accents only */
  --color-purple-light: rgba(168, 85, 247, 0.1);  /* Purple background */
  --color-purple-dark: rgba(168, 85, 247, 0.4);  /* Purple border */
  --color-purple-glow: rgba(168, 85, 247, 0.1);  /* Purple glow */
  
  /* Additional color variety */
  --color-blue: hsl(210 60% 50%);
  --color-blue-light: hsl(210 60% 60%);
  --color-blue-dark: hsl(210 60% 40%);
  --color-green: hsl(142 60% 45%);
  --color-green-light: hsl(142 60% 55%);
  --color-green-dark: hsl(142 60% 35%);
  --color-orange: hsl(38 80% 50%);
  --color-orange-light: hsl(38 80% 60%);
  --color-orange-dark: hsl(38 80% 40%);
  --color-teal: hsl(180 60% 45%);
  --color-teal-light: hsl(180 60% 55%);
  --color-teal-dark: hsl(180 60% 35%);
  --color-cyan: hsl(195 70% 50%);
  --color-cyan-light: hsl(195 70% 60%);
  --color-cyan-dark: hsl(195 70% 40%);

  /* Surfaces - LIGHT */
  --bg-primary: var(--background);
  --bg-secondary: var(--card);
  --bg-tertiary: var(--muted);
  --bg-muted: var(--muted);
  --bg-accent: var(--accent);
  --surface-deep: hsl(225 25% 95%);
  --surface-elevated: hsl(220 15% 100%);
  --surface-overlay: hsl(220 15% 100%);
  /* Neutral hover surface (avoid a purple wash in light mode) */
  --surface-hover: color-mix(in srgb, var(--surface-elevated) 93%, var(--foreground) 7%);
  --bg-overlay: hsl(0 0% 0% / 0.4);
  --bg-glass: hsl(0 0% 100% / 0.78);
  --bg-gradient-start: var(--background);
  --bg-gradient-end: var(--surface-elevated);
  --bg-gradient-primary: var(--surface-deep);
  --bg-gradient-accent: var(--accent);
  --bg-gradient-hero: var(--background);

  /* Typography */
  --text-primary: var(--foreground);
  --text-secondary: hsl(222 22% 26%);
  --text-muted: var(--muted-foreground);
  --text-soft: hsl(222 12% 40%);
  --text-inverse: var(--background);
  --text-on-primary: var(--primary-foreground);
  --text-on-dark: var(--foreground);

  /* Borders & dividers */
  --border-light: var(--border);
  --border-medium: hsl(222 18% 82%);
  --border-dark: hsl(222 18% 78%);
  --border-primary: rgba(168, 85, 247, 0.4);  /* Purple border */
  --border-primary-hover: rgba(168, 85, 247, 0.4);  /* Purple border */
  --divider-color: hsl(222 18% 86% / 0.95);
  --divider-color-light: hsl(222 18% 86% / 0.6);
  --card-border: var(--border-medium);
  --glass-border: hsl(222 18% 82% / 0.6);

  /* Components */
  --card-bg: var(--card);
  --card-shadow: var(--shadow);
  --card-hover-shadow: var(--shadow-lg);
  --stat-card-bg: var(--card);
  --feature-card-bg: var(--card);
  --pricing-card-bg: var(--card);
  --testimonial-card-bg: var(--card);
  --section-highlight-bg: var(--sidebar);
  --section-highlight-text: var(--foreground);
  --cta-panel-bg: var(--accent);
  --cta-panel-shadow: 0 40px 70px rgba(168, 85, 247, 0.1);  /* Purple glow */

  /* Navigation & footer */
  --nav-bg: hsl(225 25% 98% / 0.9);
  --nav-bg-transparent: hsl(225 25% 98% / 0.7);
  --nav-border: hsl(222 18% 86% / 0.9);
  --nav-link-hover: color-mix(in srgb, var(--bg-secondary) 92%, var(--foreground) 8%);
  --footer-bg: hsl(225 25% 98%);
  --footer-border: var(--border-light);
  --footer-text: var(--text-muted);

  /* Buttons */
  --btn-primary-bg: var(--primary);
  --btn-primary-text: var(--primary-foreground);
  --btn-primary-border: color-mix(in srgb, var(--primary) 65%, transparent);
  --btn-primary-hover-bg: color-mix(in srgb, var(--primary) 86%, black 14%);
  --btn-primary-border-hover: color-mix(in srgb, var(--primary) 75%, transparent);
  --btn-primary-shadow: 0 10px 26px rgba(168, 85, 247, 0.18);
  --btn-primary-shadow-hover: 0 14px 34px rgba(168, 85, 247, 0.22);
  --btn-outline-text: var(--text-primary);
  --btn-outline-border: var(--border-medium);
  --btn-outline-hover-bg: var(--surface-hover);
  --btn-outline-border-hover: var(--border-dark);
  --btn-ghost-bg: transparent;
  --btn-ghost-text: var(--text-primary);
  --btn-ghost-border: var(--border-light);
  --btn-ghost-border-hover: var(--border-medium);
  --btn-ghost-hover-bg: var(--surface-hover);
  --btn-ghost-hover-text: var(--text-primary);
  --focus-ring: color-mix(in srgb, var(--brand-accent) 55%, transparent);
  --focus-glow: color-mix(in srgb, var(--brand-accent) 18%, transparent);

  /* Alerts */
  --alert-success-bg: rgba(77, 182, 172, 0.15);
  --alert-success-text: var(--chart-4);
  --alert-success-border: rgba(168, 85, 247, 0.3);  /* Subtle border like onboarding */
  --alert-error-bg: rgba(255, 84, 112, 0.15);
  --alert-error-text: var(--destructive-foreground);
  --alert-error-border: rgba(255, 84, 112, 0.4);
  --alert-warning-bg: rgba(255, 121, 198, 0.15);
  --alert-warning-text: var(--chart-5);
  --alert-warning-border: rgba(255, 121, 198, 0.3);
  --alert-info-bg: rgba(168, 85, 247, 0.1);  /* Purple background */
  --alert-info-text: var(--foreground);  /* White text */
  --alert-info-border: rgba(168, 85, 247, 0.4);  /* Purple border */

  /* Badges / chips / icons */
  --badge-bg: hsl(220 15% 90% / 0.6);
  --badge-text: var(--foreground);
  --chip-bg: hsl(220 15% 90% / 0.6);
  --chip-text: var(--foreground);
  --icon-primary: var(--primary);
  --icon-secondary: var(--text-muted);
  --icon-accent: var(--accent);
  --badge-success-bg: rgba(77, 182, 172, 0.15);

  /* Inputs */
  --input-bg: var(--card);
  --input-border: var(--border-medium);
  --input-border-focus: var(--primary);
  --input-text: var(--foreground);
  --input-placeholder: var(--text-muted);

  /* Timeline / steps */
  --step-number-bg: var(--primary);
  --step-number-shadow: 0 20px 40px rgba(168, 85, 247, 0.15);  /* Landing page button hover shadow */

  /* Utility */
  --backdrop-blur: saturate(180%) blur(18px);
}

/* Light mode color scheme */
.light-mode * {
  color-scheme: light;
}

/* Heading typography */
h1, h2, h3, h4, h5, h6,
.display {
  font-family: var(--font-heading);
  letter-spacing: -0.015em;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============ */
/* Minimal Transparent Auth Navbar */
/* ============ */
.auth-nav--minimal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent !important;
  border-bottom: none !important;
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: auto;
}

.auth-nav--minimal .auth-nav__inner {
  padding: 1rem 0;
  justify-content: flex-end;
}

.auth-nav--minimal .auth-nav__links {
  gap: 0.75rem;
}

.auth-nav--minimal .auth-nav__link {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  color: var(--text-secondary);
}

.auth-nav--minimal .auth-button {
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
}

/* Always transparent - no background on scroll */
.auth-nav--minimal.is-active {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Hidden on scroll down / idle */
.auth-nav--minimal.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Mobile menu - only mobile menu gets background */
@media (max-width: 900px) {
  .auth-nav--minimal .auth-nav__links {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nav-border);
  }
}

/* ============ */
/* Collapsible App Sidebar */
/* ============ */
body.app-shell .sidebar {
  transition: width var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);
}

/* Flowbite drawer theming to blend with current palette */
#drawer-navigation {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid rgba(229, 231, 235, 0.9);
}
.dark-mode #drawer-navigation {
  background: hsl(230 15% 12% / 0.6);
  border-right-color: hsl(230 10% 25% / 0.8);
}
#drawer-navigation .text-heading {
  color: #1f2937;
}
.dark-mode #drawer-navigation .text-heading {
  color: var(--foreground);
}
#drawer-navigation .text-body {
  color: #4b5563;
}
.dark-mode #drawer-navigation .text-body {
  color: var(--text-secondary);
}
#drawer-navigation .hover\:bg-neutral-tertiary:hover {
  background: rgba(255, 255, 255, 0.05) !important;  /* White hover instead of purple */
}
#drawer-navigation .hover\:text-fg-brand:hover {
  color: var(--primary) !important;
}

/* Toggle button inside sidebar brand area */
.sidebar-collapse-btn {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.sidebar-collapse-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.dark-mode .sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.05);  /* White hover instead of purple */
  color: var(--foreground);
}

/* Collapsed state toggled on body to avoid specificity issues */
body.sidebar-collapsed .sidebar {
  width: 72px;
}

body.sidebar-collapsed .sidebar-brand__text {
  display: none;
}

body.sidebar-collapsed .sidebar-brand {
  padding-bottom: 12px;
}

body.sidebar-collapsed .sidebar-nav__link {
  justify-content: center;
  padding: 14px;
}

body.sidebar-collapsed .sidebar-nav__link .sidebar-nav__icon {
  margin: 0;
}

body.sidebar-collapsed .sidebar-nav__link span {
  display: none;
}

/* Adjust main content when collapsed if needed (flex handles most) */
body.sidebar-collapsed .main-content__header,
body.sidebar-collapsed .main-content__body {
  /* No horizontal padding changes necessary due to flex.
     Keep rules here for future fine-tuning if desired. */
}