/*!
 * Garden UI Design Tokens - Public Site Version
 * Core design system variables, themes, and color definitions
 * Extracted from garden-ui-public.css for better maintainability
 *
 * Contains: CSS Layers, Design Tokens, Theme Definitions, Reset Styles
 */

/* ===== CSS LAYERS ===== */
@layer reset, tokens, themes, base, components, utilities;

/* ===== CORE DESIGN TOKENS ===== */
@layer tokens {
  :root {
    --color-primary: var(--theme-primary);
    --color-primary-hover: var(--theme-primary-hover);
    --color-primary-alpha: var(--theme-primary-alpha);
    --color-primary-alpha-light: rgb(var(--theme-primary-rgb), 0.05);
    --color-primary-alpha-subtle: rgb(var(--theme-primary-rgb), 0.02);
    --color-on-primary: var(--theme-on-primary);
    --color-surface: var(--theme-surface);
    --color-on-surface: var(--theme-on-surface);
    --color-surface-variant: var(--theme-surface-variant);
    --color-on-surface-variant: var(--theme-on-surface-variant);
    --color-background: var(--theme-background);
    --color-on-background: var(--theme-on-background);
    --color-hover: var(--theme-hover);
    --color-focus: var(--theme-focus);
    --color-active: var(--theme-active);
    --color-selection: var(--theme-selection);
    --color-border: var(--theme-border);
    --color-border-variant: var(--theme-border-variant);
    --color-divider: var(--theme-divider);
    --color-success: var(--theme-success);
    --color-success-alpha: var(--theme-success-alpha);
    --color-warning: var(--theme-warning);
    --color-warning-alpha: var(--theme-warning-alpha);
    --color-error: var(--theme-error);
    --color-error-alpha: var(--theme-error-alpha);
    --color-info: var(--theme-info);
    --color-info-alpha: var(--theme-info-alpha);
    --color-text-primary: var(--theme-text-primary);
    --color-text-secondary: var(--theme-text-secondary);
    --color-text-tertiary: var(--theme-text-tertiary);
    --color-text-inverse: var(--theme-text-inverse);
    --color-shadow: var(--theme-shadow);
    --color-shadow-variant: var(--theme-shadow-variant);
    --ec-purple: var(--theme-primary);
    --ec-purple-light: var(--theme-primary-hover);
    --ec-purple-pale: var(--theme-primary-alpha);
    --ec-purple-dark: var(--theme-primary);
    --ec-purple-rgb: var(--theme-primary-rgb);

    /* Additional color variables for RGB replacements */
    /* Success colors - green */
    --color-success-10: #dcfce7;
    --color-success-20: #bbf7d0;
    --color-success-30: #86efac;
    --color-success-alpha-10: #22c55e1a;
    --color-success-alpha-15: #34d39926;

    /* Warning colors - amber */
    --color-warning-10: #fef3c7;
    --color-warning-20: #fde68a;
    --color-warning-30: #fcd34d;
    --color-warning-alpha-10: #f59e0b1a;
    --color-warning-alpha-20: #fbbf2433;

    /* Error colors - red */
    --color-error-10: #fee2e2;
    --color-error-20: #fecaca;
    --color-error-30: #fca5a5;
    --color-error-alpha-10: #ef44441a;
    --color-error-alpha-15: #f8717126;

    /* Info colors - blue */
    --color-info-10: #dbeafe;
    --color-info-20: #bfdbfe;
    --color-info-30: #93c5fd;
    --color-info-alpha-10: #3b82f61a;

    /* Primary/Accent colors with alpha */
    --color-primary-alpha-0: transparent;
    --color-primary-alpha-5: #553c9a0d;
    --color-primary-alpha-10: #553c9a1a;
    --color-primary-alpha-15: #553c9a26;
    --color-primary-alpha-20: #553c9a33;
    --color-primary-alpha-30: #553c9a4d;
    --color-primary-alpha-40: #553c9a66;
    --color-primary-alpha-50: #553c9a80;

    /* Violet-based colors for theme */
    --color-violet-alpha-20: #7c3aed33;
    --color-violet-alpha-30: #7c3aed4d;
    --color-violet-alpha-40: #7c3aed66;

    /* White/Black with alpha */
    --color-white-2: #ffffff05;
    --color-white-5: #ffffff0d;
    --color-white-10: #ffffff1a;
    --color-white-15: #ffffff26;
    --color-white-20: #fff3;
    --color-white-25: #ffffff40;
    --color-white-30: #ffffff4d;
    --color-white-50: #ffffff80;
    --color-white-60: #fff9;
    --color-white-70: #ffffffb3;
    --color-white-90: #ffffffe6;
    --color-shadow-5: #0000000d;
    --color-shadow-10: #0000001a;
    --color-shadow-15: #00000026;
    --color-shadow-20: #0003;
    --color-shadow-30: #0000004d;
    --color-shadow-40: #0006;
    --color-shadow-50: #00000080;
    --color-shadow-80: #000c;
    --font-mono: var(--font-sans);
    --font-sans:
      "Inter", "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto", "Helvetica Neue", arial,
      sans-serif;
    --font-body: "Inter", "Source Sans Pro", system-ui, -apple-system, sans-serif;
    --font-heading: var(--font-sans);
    --font-ui: var(--font-sans);
    --font-code: var(--font-sans);
    --font-data: var(--font-sans);
    --font-terminal: var(--font-sans);
    --font-xs: 12px;
    --font-sm: 14px;
    --font-base: 16px; /* Minimum accessible body text size */
    --font-md: 18px;
    --font-lg: 20px;
    --font-xl: 24px;
    --font-2xl: 30px;
    --font-3xl: 36px;

    /* Additional text sizes */
    --text-lg: 20px;
    --text-xl: 24px;
    --text-4xl: 36px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 50%;
    --shadow-xs: 0 1px 3px var(--color-shadow-variant);
    --shadow-sm: 0 1px 2px var(--color-shadow-variant);
    --shadow-md: 0 4px 6px var(--color-shadow);
    --shadow-lg: 0 10px 15px var(--color-shadow);
    --shadow-xl: 0 8px 32px var(--color-shadow);
    --shadow-inset: inset 0 1px 2px var(--color-shadow-variant);
    --shadow-focus: 0 0 0 4px var(--color-primary-alpha);
    --shadow-primary-light: 0 2px 8px var(--color-primary-alpha);
    --shadow-primary-focus: 0 0 0 3px var(--color-primary-alpha);
    --shadow-primary-hover: 0 4px 12px var(--color-primary-alpha);
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ===== RESPONSIVE BREAKPOINTS ===== */
    /* Standardized breakpoint system for consistent responsive design */
    --breakpoint-xs: 480px; /* Mobile phones (portrait) */
    --breakpoint-sm: 640px; /* Large mobile (landscape) / Small tablet */
    --breakpoint-md: 768px; /* Tablets (portrait) / Mobile-desktop boundary */
    --breakpoint-lg: 1024px; /* Tablets (landscape) / Small desktop */
    --breakpoint-xl: 1200px; /* Desktop / Large screens */
    --breakpoint-2xl: 1400px; /* Large desktop / Extra wide screens */

    /* Container Max Widths - Responsive containers with gutters */
    --container-xs: calc(var(--breakpoint-xs) - var(--space-8)); /* 464px */
    --container-sm: calc(var(--breakpoint-sm) - var(--space-8)); /* 624px */
    --container-md: calc(var(--breakpoint-md) - var(--space-8)); /* 752px */
    --container-lg: calc(var(--breakpoint-lg) - var(--space-8)); /* 1008px */
    --container-xl: calc(var(--breakpoint-xl) - var(--space-8)); /* 1184px */
    --container-2xl: calc(var(--breakpoint-2xl) - var(--space-8)); /* 1384px */

    /* Content Width Constraints - Following Garden UI patterns */
    --content-width-narrow: calc(var(--space-24) * 8); /* 768px - Articles, forms */
    --content-width-normal: calc(var(--space-24) * 12.5); /* 1200px - Main content */
    --content-width-wide: calc(var(--space-24) * 16.67); /* 1600px - Dashboard layouts */

    /* Semantic Component Width Variables - Design System Consistent */
    --width-button-small: calc(var(--space-24) * 1.875); /* 180px - Small buttons */
    --width-button-medium: calc(var(--space-24) * 2.29); /* 220px - Medium buttons */
    --width-button-large: calc(var(--space-24) * 2.71); /* 260px - Large buttons */
    --width-image-small: calc(var(--space-24) * 1.875); /* 180px - Small images */
    --width-image-medium: calc(var(--space-24) * 2.71); /* 260px - Medium images */
    --width-form-input: calc(var(--space-24) * 5.21); /* 500px - Form inputs */

    /* Character-based Width Standards - Typography Optimized */
    --width-text-short: 40ch; /* Short text blocks, buttons */
    --width-text-medium: 50ch; /* Medium text blocks */
    --width-text-optimal: 65ch; /* Optimal reading width - most text content */
    --width-text-wide: 75ch; /* Wide text for larger screens */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    --line-tight: 1.25;
    --line-normal: 1.5;
    --line-relaxed: 1.75;
    --focus-ring: 2px solid var(--garden-accent);
    --focus-offset: 2px;
    --platform-primary: var(--garden-accent);
    --platform-primary-hover: var(--theme-primary-hover, #6b46c1);
    --platform-primary-dark: #2d1b69;
    --header-bg: var(--theme-primary, var(--platform-primary));
    --header-text: var(--theme-on-primary, var(--garden-bg));
    --header-border: var(--theme-border, var(--garden-border));
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --z-header: 1100;
    --garden-border: #e5e7eb;
    --panel-border: #e5e7eb;
    --input-border: #e5e7eb;
    --syntax-keyword: var(--color-error);
    --syntax-string: var(--color-success);
    --syntax-comment: var(--color-on-surface-variant);
    --syntax-selector: var(--color-primary);
  }

  /* ===== THEME DEFINITIONS ===== */
  @layer themes {
    /* ===== PURPLE DARK THEME (Default) ===== */
    :root,
    [data-theme="purple-dark"] {
      --theme-primary: #1f0322; /* Dark purple */
      --theme-primary-hover: #2a0430;
      --theme-primary-alpha: color-mix(in srgb, #1f0322 15%, transparent);
      --theme-primary-rgb: 31, 3, 34;
      --theme-on-primary: #fff;
      --theme-surface: #1a1a1a;
      --theme-on-surface: #f0f0f0;
      --theme-surface-variant: #2a2a2a;
      --theme-on-surface-variant: #d0d0d0;
      --theme-background: #121212;
      --theme-on-background: #f0f0f0;
      --theme-hover: #222;
      --theme-focus: #2a2a2a;
      --theme-active: #333;
      --theme-selection: color-mix(in srgb, #1f0322 20%, transparent);
      --theme-border: #333;
      --theme-border-variant: #444;
      --theme-divider: #2a2a2a;
      --theme-success: #065d42;
      --theme-success-rgb: 6, 93, 66;
      --theme-success-alpha: color-mix(in srgb, #065d42 15%, transparent);
      --theme-warning: #7a4f05;
      --theme-warning-alpha: color-mix(in srgb, #7a4f05 15%, transparent);
      --theme-error: #8b2222;
      --theme-error-rgb: 139, 34, 34;
      --theme-error-alpha: color-mix(in srgb, #8b2222 15%, transparent);
      --theme-info: #1d4ed8;
      --theme-info-alpha: color-mix(in srgb, #1d4ed8 15%, transparent);
      --theme-text-primary: #f0f0f0;
      --theme-text-secondary: #b0b0b0;
      --theme-text-tertiary: #a0a0a0;
      --theme-text-inverse: #1a1a1a;
      --theme-shadow: color-mix(in srgb, var(--garden-text) 30%, transparent);
      --theme-shadow-variant: color-mix(in srgb, var(--garden-text) 20%, transparent);
      --garden-bg: var(--theme-background);
      --garden-fg: var(--theme-on-background);
      --garden-accent: #1f0322; /* Dark purple */
      --garden-muted: var(--theme-text-secondary);
      --garden-border: var(--theme-border);
      --garden-hover: var(--theme-hover);
      --garden-selection: var(--theme-selection);
      --garden-text: var(--theme-on-background);
      --garden-text-muted: var(--theme-text-secondary);

      /* Maya Blue for dark mode CTAs */
      --color-cta: #4fbbba; /* Light Tiffany for dark mode */
      --color-cta-hover: #5cc7c6; /* Brighter on hover */
      --color-cta-active: #3fa8a7; /* Darker on press */
      --color-cta-text: #111; /* Dark text for contrast */

      /* Garden color system */
      --garden-color-white: #fff;
      --garden-color-gray-50: #f9fafb;
      --garden-color-gray-100: #f3f4f6;
      --garden-color-gray-150: #e5e7eb;
      --garden-color-gray-200: #e5e7eb;
      --garden-color-gray-300: #d1d5db;
      --garden-color-gray-400: #9ca3af;
      --garden-color-gray-500: #6b7280;
      --garden-color-gray-600: #4b5563;
      --garden-color-gray-700: #374151;
      --garden-color-gray-800: #1f2937;
      --garden-color-gray-900: #111827;
      --garden-color-gray-950: #030712;
      --garden-color-black: #000;
      --garden-accent-light: color-mix(in srgb, var(--garden-accent) 60%, white);
      --garden-accent-lighter: color-mix(in srgb, var(--garden-accent) 40%, white);
      --garden-accent-lightest: color-mix(in srgb, var(--garden-accent) 20%, white);
      --garden-accent-dark: color-mix(in srgb, var(--garden-accent) 80%, black);
      --garden-color-info: var(--theme-info);
      --garden-color-info-dark: color-mix(in srgb, var(--theme-info) 80%, black);
      --garden-color-success: var(--theme-success);
      --garden-color-success-light: color-mix(in srgb, var(--theme-success) 30%, white);
      --garden-color-warning: var(--theme-warning);
      --garden-color-warning-light: color-mix(in srgb, var(--theme-warning) 30%, white);
      --garden-color-error: var(--theme-error);
      --garden-color-error-light: color-mix(in srgb, var(--theme-error) 30%, white);
      --color-success-alpha-20: rgb(var(--theme-success-rgb), 0.2);
      --color-error-alpha-20: rgb(var(--theme-error-rgb), 0.2);
      --accent-text: var(--theme-on-primary);
      --accent-text-shadow: 0 1px 3px var(--theme-shadow);
      --panel-bg: var(--theme-surface);
      --panel-border: var(--theme-border);
      --panel-header-bg: var(--theme-surface-variant);
      --input-bg: var(--theme-surface);

      /* Header variables for dark theme navigation visibility */
      --header-bg: var(--theme-primary);
      --header-text: var(--theme-on-primary);
      --header-border: var(--theme-border);
      --input-border: var(--theme-border);
      --input-focus-border: var(--theme-primary);
      --success: var(--theme-success);
      --error: var(--theme-error);
      --warning: var(--theme-warning);
      --info: var(--theme-info);
      --positive: var(--theme-success);
      --negative: var(--theme-error);
      --terminal-bg: var(--theme-background);
      --terminal-fg: var(--theme-on-background);
      --terminal-accent: var(--theme-primary);
      --terminal-muted: var(--theme-text-secondary);
      --terminal-border: var(--theme-border);
      --terminal-hover: var(--theme-hover);
    }

    /* ===== PURPLE LIGHT THEME ===== */
    [data-theme="light"],
    [data-theme="purple-light"] {
      --theme-primary: #b57edc; /* Lavender */
      --theme-primary-hover: #a56cc9;
      --theme-primary-alpha: color-mix(in srgb, #b57edc 10%, transparent);
      --theme-primary-rgb: 181, 126, 220;
      --theme-on-primary: #fff;
      --theme-surface: #fcefef; /* Lavender Blush */
      --theme-on-surface: #111;
      --theme-surface-variant: #fdf5f5; /* Lighter Lavender Blush variant */
      --theme-on-surface-variant: var(--theme-text-secondary);
      --theme-background: #fcefef; /* Lavender Blush background */
      --theme-on-background: #111;
      --theme-hover: #fdf5f5;
      --theme-focus: #fef8f8;
      --theme-active: #fae5e5;
      --theme-selection: color-mix(in srgb, #b57edc 15%, transparent);
      --theme-border: #f5e0e0; /* Slightly darker Lavender Blush for borders */
      --theme-border-variant: #edd2d2;
      --theme-divider: #f8e8e8;
      --theme-success: #065d42;
      --theme-success-rgb: 6, 93, 66;
      --theme-success-alpha: color-mix(in srgb, #065d42 10%, transparent);
      --theme-warning: #7a4f05;
      --theme-warning-alpha: color-mix(in srgb, #7a4f05 10%, transparent);
      --theme-error: #8b2222;
      --theme-error-alpha: color-mix(in srgb, #8b2222 10%, transparent);
      --theme-info: #1d4ed8;
      --theme-info-alpha: color-mix(in srgb, #1d4ed8 10%, transparent);
      --theme-text-primary: #111;
      --theme-text-secondary: color-mix(in srgb, var(--theme-text-primary) 60%, var(--theme-background));
      --theme-text-tertiary: color-mix(in srgb, var(--theme-text-primary) 40%, var(--theme-background));
      --theme-text-inverse: #fff;
      --theme-shadow: color-mix(in srgb, var(--garden-text) 15%, transparent);
      --theme-shadow-variant: color-mix(in srgb, var(--garden-text) 8%, transparent);
      --garden-bg: var(--theme-background);
      --garden-fg: var(--theme-on-background);
      --garden-accent: #b57edc; /* Lavender */
      --garden-muted: var(--theme-text-secondary);
      --garden-border: var(--theme-border);
      --garden-hover: var(--theme-hover);
      --garden-selection: var(--theme-selection);
      --garden-text: var(--theme-on-background);
      --garden-text-muted: var(--theme-text-secondary);

      /* Tiffany Blue for CTAs */
      --color-cta: #2d7a68; /* Dark Tiffany Blue - WCAG AA compliant (4.57:1) */
      --color-cta-hover: #236354; /* Darker on hover */
      --color-cta-active: #1a4d41; /* Darkest on press */
      --color-cta-text: #fff; /* White text for readability (5.13:1) */
      --color-cta-alpha-30: rgb(45 122 104 / 30%);

      /* Garden color system */
      --garden-color-white: #fff;
      --garden-color-gray-50: #f9fafb;
      --garden-color-gray-100: #f3f4f6;
      --garden-color-gray-150: #e5e7eb;
      --garden-color-gray-200: #e5e7eb;
      --garden-color-gray-300: #d1d5db;
      --garden-color-gray-400: #9ca3af;
      --garden-color-gray-500: #6b7280;
      --garden-color-gray-600: #4b5563;
      --garden-color-gray-700: #374151;
      --garden-color-gray-800: #1f2937;
      --garden-color-gray-900: #111827;
      --garden-color-gray-950: #030712;
      --garden-color-black: #000;
      --garden-accent-light: color-mix(in srgb, var(--garden-accent) 60%, white);
      --garden-accent-lighter: color-mix(in srgb, var(--garden-accent) 40%, white);
      --garden-accent-lightest: color-mix(in srgb, var(--garden-accent) 20%, white);
      --garden-accent-dark: color-mix(in srgb, var(--garden-accent) 80%, black);
      --garden-color-info: var(--theme-info);
      --garden-color-info-dark: color-mix(in srgb, var(--theme-info) 80%, black);
      --garden-color-success: var(--theme-success);
      --garden-color-success-light: color-mix(in srgb, var(--theme-success) 30%, white);
      --garden-color-warning: var(--theme-warning);
      --garden-color-warning-light: color-mix(in srgb, var(--theme-warning) 30%, white);
      --garden-color-error: var(--theme-error);
      --garden-color-error-light: color-mix(in srgb, var(--theme-error) 30%, white);
      --color-success-alpha-20: rgb(var(--theme-success-rgb), 0.2);
      --color-error-alpha-20: rgb(var(--theme-error-rgb), 0.2);
      --accent-text: var(--theme-on-primary);
      --accent-text-shadow: 0 1px 2px var(--theme-shadow);
      --button-text-contrast: var(--theme-text-primary);
      --button-border-contrast: var(--theme-primary-hover);
      --button-bg-contrast: var(--theme-background);
      --panel-bg: var(--theme-surface);
      --panel-border: var(--theme-border);
      --panel-header-bg: var(--theme-surface-variant);
      --input-bg: var(--theme-surface);
      --input-border: var(--theme-border-variant);
      --input-focus-border: var(--theme-primary);
      --success: var(--theme-success);
      --error: var(--theme-error);
      --warning: var(--theme-warning);
      --info: var(--theme-info);
      --positive: var(--theme-success);
      --negative: var(--theme-error);
      --terminal-bg: var(--theme-background);
      --terminal-fg: var(--theme-on-background);
      --terminal-accent: var(--theme-primary);
      --terminal-muted: var(--theme-text-secondary);
      --terminal-border: var(--theme-border);
      --terminal-hover: var(--theme-hover);

      /* Header variables for light theme navigation visibility */
      --header-bg: var(--theme-primary);
      --header-text: var(--theme-on-primary);
      --header-border: var(--theme-border);

      /* Component-specific variables for buttons */
      --garden-button-bg: var(--theme-primary);
      --garden-button-fg: var(--theme-on-primary);
      --garden-button-border: var(--theme-primary);
      --garden-button-hover-bg: var(--theme-primary-hover);
      --garden-button-hover-fg: var(--theme-on-primary);
      --garden-button-hover-border: var(--theme-primary-hover);
      --garden-button-focus-ring: 0 0 0 4px var(--theme-primary-alpha);
      --garden-button-disabled-opacity: 0.6;

      /* Secondary button variants */
      --garden-button-secondary-bg: transparent;
      --garden-button-secondary-fg: var(--theme-primary);
      --garden-button-secondary-border: var(--theme-border);
      --garden-button-secondary-hover-bg: var(--theme-hover);
      --garden-button-secondary-hover-fg: var(--theme-primary-hover);
      --garden-button-secondary-hover-border: var(--theme-primary);

      /* Button on colored background */
      --garden-button-on-color-bg: var(--theme-background);
      --garden-button-on-color-fg: var(--theme-primary);
      --garden-button-on-color-border: var(--theme-background);
      --garden-button-on-color-hover-bg: var(--theme-surface);
      --garden-button-on-color-hover-fg: var(--theme-primary);

      /* Form input variables */
      --garden-input-bg: var(--theme-background);
      --garden-input-fg: var(--theme-on-background);
      --garden-input-border: var(--theme-border);
      --garden-input-hover-border: var(--theme-border-variant);
      --garden-input-focus-border: var(--theme-primary);
      --garden-input-focus-ring: 0 0 0 2px var(--theme-primary-alpha);
      --garden-input-disabled-bg: var(--theme-surface);
      --garden-input-disabled-opacity: 0.5;
      --garden-input-error-border: var(--theme-error);
      --garden-input-success-border: var(--theme-success);

      /* These ensure compatibility with existing code */
      --garden-bg: var(--theme-background);
      --garden-fg: var(--theme-on-background);
      --garden-accent: var(--theme-primary);
      --garden-border: var(--theme-border);
      --garden-surface: var(--theme-surface);
    }

    /* ===== AUTO THEME (Follows system preference) ===== */
    @media (prefers-color-scheme: light) {
      [data-theme="auto"] {
        --theme-primary: var(--garden-accent);
        --theme-primary-hover: #442f7a;
        --theme-primary-alpha: color-mix(in srgb, var(--garden-accent) 10%, transparent);
        --theme-on-primary: #fff;
        --theme-surface: #fff;
        --theme-on-surface: #111;
        --theme-background: #fff;
        --theme-on-background: #111;
        --theme-hover: #f9fafb;
        --theme-border: #e5e7eb;
        --theme-text-primary: #111;
        --theme-text-secondary: var(--garden-text-muted);
        --theme-shadow: color-mix(in srgb, var(--garden-text) 15%, transparent);
        --garden-bg: var(--theme-background);
        --garden-fg: var(--theme-on-background);
        --garden-accent: #3d2970;
        --garden-muted: var(--theme-text-secondary);
        --garden-border: var(--theme-border);
        --garden-hover: var(--theme-hover);
        --accent-text: var(--theme-on-primary);
        --accent-text-shadow: 0 1px 2px var(--theme-shadow);
      }
    }

    /* ===== EXAMPLE EXTENSIBLE THEMES (Demonstrates future flexibility) ===== */

    /* Blue Theme - Shows how easy it is to add new brand colors */
    [data-theme="blue-light"] {
      --theme-primary: #2563eb;
      --theme-primary-hover: var(--garden-accent);
      --theme-primary-alpha: color-mix(in srgb, #2563eb 10%, transparent);
      --theme-on-primary: #fff;
      --theme-surface: #fff;
      --theme-on-surface: #1a1a1a;
      --theme-background: #fff;
      --theme-on-background: #1a1a1a;
      --theme-hover: #f9fafb;
      --theme-border: #e5e7eb;
      --theme-text-primary: #1a1a1a;
      --theme-text-secondary: var(--garden-text-muted);
      --theme-shadow: color-mix(in srgb, var(--garden-text) 15%, transparent);
      --garden-accent: #3d2970;
      --accent-text: var(--theme-on-primary);
    }

    [data-theme="blue-dark"] {
      --theme-primary: var(--color-info);
      --theme-primary-hover: #60a5fa;
      --theme-primary-alpha: color-mix(in srgb, var(--color-info) 15%, transparent);
      --theme-on-primary: #fff;
      --theme-surface: #1a1a1a;
      --theme-on-surface: #e0e0e0;
      --theme-background: #121212;
      --theme-on-background: #e0e0e0;
      --theme-hover: #222;
      --theme-border: #333;
      --theme-text-primary: #f0f0f0;
      --theme-text-secondary: #b0b0b0;
      --theme-shadow: color-mix(in srgb, var(--garden-text) 30%, transparent);
      --garden-accent: #3d2970;
      --accent-text: var(--theme-on-primary);
    }

    /* Standard Light Theme */
    [data-theme="light"] {
      --theme-primary: #3d2970;
      --theme-primary-hover: #2d1f52;
      --theme-primary-alpha: color-mix(in srgb, #3d2970 10%, transparent);
      --theme-primary-rgb: 61, 41, 112;
      --theme-on-primary: #fff;
      --theme-surface: #fff;
      --theme-on-surface: #111;
      --theme-surface-variant: #f9fafb;
      --theme-on-surface-variant: var(--theme-text-secondary);
      --theme-background: #fff;
      --theme-on-background: #111;
      --theme-hover: #f9fafb;
      --theme-focus: #f3f4f6;
      --theme-active: #e5e7eb;
      --theme-selection: color-mix(in srgb, #3d2970 10%, transparent);
      --theme-border: #e5e7eb;
      --theme-border-variant: #d1d5db;
      --theme-divider: #e5e7eb;
      --theme-success: #065f46;
      --theme-success-rgb: 6, 95, 70;
      --theme-warning: #92400e;
      --theme-warning-rgb: 146, 64, 14;
      --theme-error: #991b1b;
      --theme-error-rgb: 153, 27, 27;
      --theme-info: #1e40af;
      --theme-info-rgb: 30, 64, 175;
      --theme-success-alpha: color-mix(in srgb, #065f46 10%, transparent);
      --theme-warning-alpha: color-mix(in srgb, #92400e 10%, transparent);
      --theme-error-alpha: color-mix(in srgb, #991b1b 10%, transparent);
      --theme-info-alpha: color-mix(in srgb, #1e40af 10%, transparent);
      --theme-text-primary: #111;
      --theme-text-secondary: color-mix(in srgb, #111 60%, #fff);
      --theme-text-tertiary: color-mix(in srgb, #111 40%, #fff);
      --theme-text-muted: #6b7280;
      --theme-shadow: rgb(0 0 0 / 10%);

      /* Map to common variables */
      --color-background: var(--theme-background);
      --color-surface: var(--theme-surface);
      --color-surface-variant: var(--theme-surface-variant);
      --color-primary: var(--theme-primary);
      --color-on-primary: var(--theme-on-primary);
      --color-text-primary: var(--theme-text-primary);
      --color-text-secondary: var(--theme-text-secondary);
      --color-border: var(--theme-border);
      --garden-bg: var(--theme-background);
      --garden-fg: var(--theme-text-primary);
      --garden-surface: var(--theme-surface);
      --garden-border: var(--theme-border);
      --garden-muted: var(--theme-text-secondary);
    }

    /* Standard Dark Theme */
    [data-theme="dark"] {
      --theme-primary: var(--garden-accent);
      --theme-primary-hover: #6b46c1;
      --theme-primary-alpha: color-mix(in srgb, var(--garden-accent) 15%, transparent);
      --theme-primary-rgb: 85, 60, 154;
      --theme-on-primary: #fff;
      --theme-surface: #1a1a1a;
      --theme-on-surface: #f0f0f0;
      --theme-surface-variant: #2a2a2a;
      --theme-on-surface-variant: #d0d0d0;
      --theme-background: #121212;
      --theme-on-background: #f0f0f0;
      --theme-hover: #222;
      --theme-focus: #2a2a2a;
      --theme-active: #333;
      --theme-selection: color-mix(in srgb, var(--garden-accent) 20%, transparent);
      --theme-border: #333;
      --theme-border-variant: #444;
      --theme-divider: #2a2a2a;
      --theme-success: #065d42;
      --theme-success-rgb: 6, 93, 66;
      --theme-warning: #78350f;
      --theme-warning-rgb: 120, 53, 15;
      --theme-error: #7f1d1d;
      --theme-error-rgb: 127, 29, 29;
      --theme-info: #1e3a8a;
      --theme-info-rgb: 30, 58, 138;
      --theme-success-alpha: color-mix(in srgb, var(--theme-success) 10%, transparent);
      --theme-warning-alpha: color-mix(in srgb, var(--theme-warning) 10%, transparent);
      --theme-error-alpha: color-mix(in srgb, var(--theme-error) 10%, transparent);
      --theme-info-alpha: color-mix(in srgb, var(--theme-info) 10%, transparent);
      --theme-text-primary: #f0f0f0;
      --theme-text-secondary: #b0b0b0;
      --theme-text-tertiary: #808080;
      --theme-text-muted: #808080;
      --theme-shadow: rgb(0 0 0 / 50%);

      /* Map to common variables */
      --color-background: var(--theme-background);
      --color-surface: var(--theme-surface);
      --color-surface-variant: var(--theme-surface-variant);
      --color-primary: var(--theme-primary);
      --color-on-primary: var(--theme-on-primary);
      --color-text-primary: var(--theme-text-primary);
      --color-text-secondary: var(--theme-text-secondary);
      --color-border: var(--theme-border);
      --garden-bg: var(--theme-background);
      --garden-fg: var(--theme-text-primary);
      --garden-surface: var(--theme-surface);
      --garden-border: var(--theme-border);
      --garden-muted: var(--theme-text-secondary);

      /* Component-specific variables for dark theme */
      --garden-button-bg: var(--theme-primary);
      --garden-button-fg: var(--theme-on-primary);
      --garden-button-border: var(--theme-primary);
      --garden-button-hover-bg: var(--theme-primary-hover);
      --garden-button-hover-fg: var(--theme-on-primary);
      --garden-button-hover-border: var(--theme-primary-hover);
      --garden-button-focus-ring: 0 0 0 4px var(--theme-primary-alpha);
      --garden-button-disabled-opacity: 0.6;

      /* Secondary button variants for dark theme */
      --garden-button-secondary-bg: transparent;
      --garden-button-secondary-fg: var(--theme-on-surface);
      --garden-button-secondary-border: var(--theme-border);
      --garden-button-secondary-hover-bg: var(--theme-surface);
      --garden-button-secondary-hover-fg: var(--theme-on-surface);
      --garden-button-secondary-hover-border: var(--theme-border-variant);

      /* Button on colored background for dark theme */
      --garden-button-on-color-bg: var(--theme-surface);
      --garden-button-on-color-fg: var(--theme-on-surface);
      --garden-button-on-color-border: var(--theme-surface);
      --garden-button-on-color-hover-bg: var(--theme-surface-variant);
      --garden-button-on-color-hover-fg: var(--theme-on-surface);

      /* Form input variables for dark theme */
      --garden-input-bg: var(--theme-surface);
      --garden-input-fg: var(--theme-on-surface);
      --garden-input-border: var(--theme-border);
      --garden-input-hover-border: var(--theme-border-variant);
      --garden-input-focus-border: var(--theme-primary);
      --garden-input-focus-ring: 0 0 0 2px var(--theme-primary-alpha);
      --garden-input-disabled-bg: var(--theme-surface-variant);
      --garden-input-disabled-opacity: 0.5;
      --garden-input-error-border: var(--theme-error);
      --garden-input-success-border: var(--theme-success);
    }

    /* Green Theme - Another example */
    [data-theme="green-light"] {
      --theme-primary: var(--color-success);
      --theme-primary-hover: #047857;
      --theme-primary-alpha: color-mix(in srgb, var(--color-success) 10%, transparent);
      --theme-on-primary: #fff;
      --theme-surface: #fff;
      --theme-on-surface: #1a1a1a;
      --theme-background: #fff;
      --theme-on-background: #1a1a1a;
      --theme-hover: #f9fafb;
      --theme-border: #e5e7eb;
      --theme-text-primary: #1a1a1a;
      --theme-text-secondary: var(--garden-text-muted);
      --theme-shadow: color-mix(in srgb, var(--garden-text) 15%, transparent);
      --garden-accent: #3d2970;
      --accent-text: var(--theme-on-primary);

      /* Additional missing variables for compatibility */
      --color-surface-secondary: var(--theme-surface-variant);
      --color-surface-hover: var(--theme-hover);
      --color-primary-light: var(--theme-primary-hover);
      --color-primary-dark: var(--theme-primary);
      --color-primary-600: var(--theme-primary);
      --color-border-subtle: var(--theme-border-variant);
      --color-border-hover: var(--theme-border-variant);
      --color-muted: var(--theme-text-secondary);
      --color-on-error: var(--theme-text-inverse);
      --streamfield-spacing: var(--space-4);
      --callout-border-width: 1px;
      --garden-accent-rgb: 61, 41, 112;
      --garden-accent-hover: #4c3b8a;
      --color-surface-stripe: var(--theme-surface-variant);
      --line-height-normal: 1.5;
      --header-height: 64px;
      --space-0-25: 1px;
      --space-15: 60px;
      --doc-surface-0: var(--theme-surface);
      --doc-surface-1: var(--theme-surface-variant);
      --doc-surface-2: var(--theme-background);
      --garden-spacing-md: var(--space-4);
      --garden-spacing-lg: var(--space-6);
      --garden-spacing-xl: var(--space-8);
      --garden-primary: var(--theme-primary);
      --garden-bg-subtle: var(--theme-surface-variant);
      --garden-bg-hover: var(--theme-hover);

      /* Additional variables for remaining compatibility issues */
      --color-success-bg: var(--theme-success-alpha);
      --color-warning-bg: var(--theme-warning-alpha);
      --surface-variant: var(--theme-surface-variant);
      --border-color: var(--theme-border);
      --text-secondary: var(--theme-text-secondary);
      --color-border-primary: var(--theme-primary);
      --font-family-mono: var(--font-sans);
      --border-radius-lg: var(--radius-lg);
      --doc-surface-3: var(--theme-background);
      --garden-border-radius: var(--radius-md);
      --garden-surface-elevated: var(--theme-surface-variant);
      --header-hover: var(--theme-hover);
      --space-0-5: 2px;
      --garden-border-subtle: var(--theme-border-variant);
      --garden-accent-alpha: var(--theme-primary-alpha);
      --garden-shadow-lg: var(--shadow-lg);
      --color-accent: var(--theme-primary);
      --text-3xl: 36px;

      /* Final missing variables */
      --color-error-bg: var(--theme-error-alpha);
      --code-bg: var(--theme-surface-variant);
      --block-border: var(--theme-border);
      --surface: var(--theme-surface);
      --text-primary: var(--theme-text-primary);
      --color-border-secondary: var(--theme-border-variant);
      --font-size-base: var(--font-base);
      --garden-spacing-sm: var(--space-2);
      --garden-text-primary: var(--theme-text-primary);
      --text-sm: 14px;
      --color-surface-elevated: var(--theme-surface-variant);

      /* Final cleanup variables */
      --terminal-border-rgb: 229, 231, 235;
      --garden-link: var(--theme-primary);
      --garden-spacing-xs: var(--space-1);
      --garden-text-secondary: var(--theme-text-secondary);

      /* Accessibility & hover variables */
      --color-primary-visited: var(--theme-primary);
      --color-error-light: var(--theme-error-alpha);
      --color-success-light: var(--theme-success-alpha);
      --color-border-light: var(--theme-border);
      --color-surface-dark: var(--theme-surface-variant);
      --color-border-dark: var(--theme-border-variant);
      --garden-link-hover: var(--theme-primary-hover);
      --garden-primary-hover: var(--theme-primary-hover);
      --garden-surface-hover: var(--theme-hover);

      /* Additional missing variables found by tests */
      --garden-border-light: var(--theme-border);
      --text-base: var(--font-base);
      --text-2xl: var(--font-2xl);
      --text-xs: var(--font-xs);
    }
  }
}