@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap);
/* src/styles/themes/default-theme.css */
.default-theme {
  /* Typography - use base variables */
  --font-family-primary: var(--font-family-mono);
  --font-family-heading: var(--font-family-primary);
  --font-family-base: var(--font-family-primary);
  --font-family-mono: 'Roboto Mono', monospace;

  /* Colors - Brand - Material UI Blue */
  --color-brand-primary: #2196f3;
  --color-brand-primary-light: #64b5f6;
  --color-brand-primary-dark: #1976d2;
  --color-brand-secondary: #ff5722;
  --color-brand-secondary-light: #ff8a65;
  --color-brand-secondary-dark: #e64a19;

  /* Colors - Background */
  --color-bg-secondary: #fafafa;
  --color-border: #e0e0e0;
  --color-gray-50: #fafafa;

  /* Component: Typography */
  --typography-color: var(--color-text);
  --typography-muted-color: var(--color-text-light);
  --typography-margin-bottom: var(--space-4);
  --typography-h1-size: var(--font-size-6xl);
  --typography-h2-size: var(--font-size-4xl);
  --typography-h3-size: var(--font-size-3xl);
  --typography-h4-size: var(--font-size-2xl);
  --typography-h5-size: var(--font-size-xl);
  --typography-h6-size: var(--font-size-lg);
  --typography-body-size: var(--font-size-base);
  --typography-small-size: var(--font-size-sm);

  /* Component: Button */
  --button-bg: var(--color-brand-primary);
  --button-color: var(--color-text-white);
  --button-border: none;
  --button-radius: 4px;
  --button-hover-bg: var(--color-brand-primary-dark);
  --button-hover-border-color: transparent;
  --button-hover-color: var(--color-text-white);
  --button-hover-shadow:
    0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
  --button-hover-transform: translateY(-1px);
  --button-active-bg: var(--color-brand-primary-dark);
  --button-active-border-color: transparent;
  --button-active-transform: translateY(0);
  --button-active-shadow:
    0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14);
  --button-disabled-bg: rgba(0, 0, 0, 0.12);
  --button-disabled-border-color: transparent;
  --button-disabled-color: rgba(0, 0, 0, 0.26);
  --button-disabled-opacity: 1;
  --button-padding: 6px 16px;
  --button-font-size: 0.875rem;
  --button-font-family: var(--font-family-primary);
  --button-font-weight: 500;
  --button-transition:
    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --button-shadow:
    0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  --button-focus-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);

  /* Primary variant */
  --button-primary-bg: var(--color-brand-primary);
  --button-primary-color: var(--color-text-white);
  --button-primary-border-color: transparent;
  --button-primary-hover-bg: var(--color-brand-primary-dark);
  --button-primary-hover-border-color: transparent;
  --button-primary-hover-color: var(--color-text-white);
  --button-primary-active-bg: var(--color-brand-primary-dark);
  --button-primary-active-border-color: transparent;

  /* Secondary variant */
  --button-secondary-bg: var(--color-brand-secondary);
  --button-secondary-color: var(--color-text-white);
  --button-secondary-border-color: transparent;
  --button-secondary-hover-bg: var(--color-brand-secondary-dark);
  --button-secondary-hover-border-color: transparent;
  --button-secondary-hover-color: var(--color-text-white);
  --button-secondary-active-bg: var(--color-brand-secondary-dark);
  --button-secondary-active-border-color: transparent;

  /* Text variant */
  --button-text-color: var(--color-brand-primary);
  --button-text-hover-color: var(--color-brand-primary-dark);
  --button-text-padding: 6px 8px;

  /* Small button styles */
  --button-padding-sm: 4px 10px;
  --button-font-size-sm: 0.8125rem;
  --button-radius-sm: 4px;
  --button-icon-size-sm: 18px;

  /* Large button styles */
  --button-padding-lg: 8px 22px;
  --button-font-size-lg: 0.9375rem;
  --button-radius-lg: 4px;
  --button-icon-size-lg: 22px;

  /* Icon button styles */
  --button-icon-margin: 8px;
  --button-icon-padding: 12px;
  --button-icon-radius: 50%;
  --button-icon-size: 24px;

  /* Outlined button styles */
  --button-outlined-color: var(--color-brand-primary);
  --button-outlined-border-color: rgba(33, 150, 243, 0.5);
  --button-outlined-hover-bg: rgba(33, 150, 243, 0.08);
  --button-outlined-hover-color: var(--color-brand-primary);
  --button-outlined-hover-border-color: var(--color-brand-primary);

  /* Success button styles */
  --button-success-bg: #4caf50;
  --button-success-color: var(--color-text-white);
  --button-success-border-color: transparent;
  --button-success-hover-bg: #388e3c;
  --button-success-hover-border-color: transparent;
  --button-success-hover-color: var(--color-text-white);

  /* Danger button styles */
  --button-danger-bg: #f44336;
  --button-danger-color: var(--color-text-white);
  --button-danger-border-color: transparent;
  --button-danger-hover-bg: #d32f2f;
  --button-danger-hover-border-color: transparent;
  --button-danger-hover-color: var(--color-text-white);

  /* Component: Link */
  --link-color: var(--color-brand-primary);
  --link-hover-color: var(--color-brand-primary-dark);
  --link-active-color: var(--color-brand-primary-dark);
  --link-margin-left: 0;
  --link-margin-right: var(--space-1);
  --link-font-family: var(--font-family-primary);
  --link-transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Component: Card */
  --card-bg: var(--color-white);
  --card-color: var(--color-text);
  --card-radius: 4px;
  --card-border: none;
  --card-border-color: transparent;
  --card-shadow:
    0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
    0 1px 3px 0 rgba(0, 0, 0, 0.12);
  --card-hover-border-color: transparent;
  --card-hover-shadow:
    0 4px 8px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.12);
  --card-title-padding: 16px;
  --card-title-font-size: 1.25rem;
  --card-title-font-weight: 500;
  --card-title-border: none;
  --card-content-padding: 16px;
  --card-footer-padding: 8px;
  --card-footer-bg: transparent;
  --card-footer-border: none;
  --card-footer-font-size: 0.875rem;
  --card-title-padding-mobile: 16px;
  --card-content-padding-mobile: 16px;
  --card-footer-padding-mobile: 8px;

  /* Component: Input */
  --input-bg: var(--color-bg);
  --input-color: var(--color-text);
  --input-border: none;
  --input-border-bottom: 1px solid rgba(0, 0, 0, 0.42);
  --input-radius: 4px 4px 0 0;
  --input-padding: 4px 0 5px;
  --input-font-size: 1rem;
  --input-font-family: var(--font-family-primary);
  --input-shadow: none;
  --input-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --input-placeholder-color: rgba(0, 0, 0, 0.54);
  --input-focus-border-color: var(--color-brand-primary);
  --input-focus-shadow: none;
  --input-disabled-bg: transparent;
  --input-disabled-opacity: 0.38;
  --input-valid-border-color: #4caf50;
  --input-valid-color: #4caf50;
  --input-invalid-border-color: #f44336;
  --input-validation-color: #f44336;
  --input-validation-font-size: 0.75rem;
  --input-margin-bottom: 16px;
  --input-mobile-font-size: 16px;
  --input-mobile-padding: 4px 0 5px;

  /* Component: Select */
  --select-bg: var(--color-bg);
  --select-color: var(--color-text);
  --select-border: none;
  --select-border-bottom: 1px solid rgba(0, 0, 0, 0.42);
  --select-radius: 4px 4px 0 0;
  --select-padding: 4px 0 5px;
  --select-font-size: 1rem;
  --select-font-family: var(--font-family-primary);
  --select-shadow: none;
  --select-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --select-option-color: var(--color-text);
  --select-option-bg: var(--color-bg);
  --select-option-disabled-color: rgba(0, 0, 0, 0.38);
  --select-focus-border-color: var(--color-brand-primary);
  --select-focus-shadow: none;
  --select-disabled-bg: transparent;
  --select-disabled-opacity: 0.38;
  --select-valid-border-color: #4caf50;
  --select-valid-color: #4caf50;
  --select-invalid-border-color: #f44336;
  --select-validation-color: #f44336;
  --select-validation-font-size: 0.75rem;
  --select-margin-bottom: 16px;
  --select-mobile-font-size: 16px;
  --select-mobile-padding: 4px 0 5px;
  --select-multiple-padding: 4px 0;
  --select-option-padding: 6px 16px;
  --select-option-margin: 0;

  /* Component: Checkbox */
  --checkbox-bg: transparent;
  --checkbox-border: 2px solid rgba(0, 0, 0, 0.54);
  --checkbox-radius: 2px;
  --checkbox-size: 18px;
  --checkbox-color: var(--color-text);
  --checkbox-indicator-margin: 8px;
  --checkbox-font-size: 1rem;
  --checkbox-font-family: var(--font-family-primary);
  --checkbox-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --checkbox-padding: 0;
  --checkbox-hover-border-color: rgba(0, 0, 0, 0.87);
  --checkbox-checked-bg: var(--color-brand-primary);
  --checkbox-checked-border-color: var(--color-brand-primary);
  --checkbox-focus-shadow: 0 0 0 8px rgba(33, 150, 243, 0.16);
  --checkbox-disabled-bg: transparent;
  --checkbox-disabled-border-color: rgba(0, 0, 0, 0.26);
  --checkbox-disabled-color: rgba(0, 0, 0, 0.26);
  --checkbox-valid-border-color: #4caf50;
  --checkbox-valid-color: #4caf50;
  --checkbox-invalid-border-color: #f44336;
  --checkbox-validation-color: #f44336;
  --checkbox-validation-font-size: 0.75rem;
  --checkbox-margin-bottom: 12px;
  --checkbox-indicator-width: 4px;
  --checkbox-indicator-height: 9px;
  --checkbox-required-color: #f44336;
  --checkbox-indeterminate-bg: var(--color-brand-primary);
  --checkbox-indeterminate-border-color: var(--color-brand-primary);
  --checkbox-indeterminate-width: 10px;
  --checkbox-indeterminate-height: 2px;

  /* Component: Radio */
  --radio-bg: transparent;
  --radio-border: 2px solid rgba(0, 0, 0, 0.54);
  --radio-size: 20px;
  --radio-inner-size: 10px;
  --radio-color: var(--color-text);
  --radio-indicator-margin: 8px;
  --radio-font-size: 1rem;
  --radio-font-family: var(--font-family-primary);
  --radio-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --radio-padding: 0;
  --radio-hover-border-color: rgba(0, 0, 0, 0.87);
  --radio-checked-color: var(--color-brand-primary);
  --radio-checked-border-color: var(--color-brand-primary);
  --radio-focus-shadow: 0 0 0 8px rgba(33, 150, 243, 0.16);
  --radio-disabled-bg: transparent;
  --radio-disabled-border-color: rgba(0, 0, 0, 0.26);
  --radio-disabled-color: rgba(0, 0, 0, 0.26);
  --radio-disabled-checked-color: rgba(0, 0, 0, 0.26);
  --radio-margin-bottom: 12px;
  --radio-required-color: #f44336;

  /* Component: Radio Group */
  --radio-group-margin-bottom: 16px;
  --radio-group-padding: 8px;
  --radio-group-border: none;
  --radio-group-radius: 4px;
  --radio-group-legend-font-size: 0.75rem;
  --radio-group-legend-color: rgba(0, 0, 0, 0.54);
  --radio-group-font-family: var(--font-family-primary);
  --radio-group-legend-font-weight: 400;
  --radio-group-legend-padding: 0;
  --radio-group-legend-margin-bottom: 8px;
  --radio-group-required-color: #f44336;
  --radio-group-gap: 8px;
  --radio-group-valid-border-color: #4caf50;
  --radio-group-invalid-border-color: #f44336;
  --radio-group-validation-color: #f44336;
  --radio-group-validation-font-size: 0.75rem;
  --radio-group-disabled-opacity: 0.38;
  --radio-group-disabled-bg: transparent;

  /* Component: Form Group */
  --form-group-margin-bottom: 16px;
  --form-group-label-font-size: 0.75rem;
  --form-group-label-color: rgba(0, 0, 0, 0.54);
  --form-group-font-family: var(--font-family-primary);
  --form-group-label-font-weight: 400;
  --form-group-label-margin-bottom: 8px;
  --form-group-required-color: #f44336;
  --form-group-help-font-size: 0.75rem;
  --form-group-help-color: rgba(0, 0, 0, 0.54);
  --form-group-label-margin-right: 16px;
  --form-group-label-margin-left: 16px;
  --form-group-label-width: 30%;

  /* Component: Form */
  --form-label-width: 30%;
  --form-section-margin-bottom: 24px;
  --form-section-title-font-size: 1.25rem;
  --form-section-title-color: var(--color-text);
  --form-section-title-font-weight: 500;
  --form-section-title-margin-bottom: 16px;
  --form-section-title-border: none;
  --form-section-description-font-size: 0.875rem;
  --form-section-description-color: rgba(0, 0, 0, 0.54);
  --form-section-description-margin-bottom: 16px;
  --form-actions-gap: 8px;
  --form-actions-margin-top: 24px;
  --form-actions-justify: flex-end;

  /* Component: Navigation */
  --nav-bg: var(--color-bg);
  --nav-border-bottom: none;
  --nav-dropdown-bg: var(--color-bg);
  --nav-dropdown-shadow:
    0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  --nav-padding: 0 16px;
  --nav-margin-right: 0;
  --nav-font-size: 0.875rem;
  --nav-line-height: 1.5;
  --nav-active-font-weight: 500;
  --nav-focus-shadow: none;
  --nav-item-spacing: 24px;
  --nav-item-spacing-vertical: 8px;
  --nav-submenu-indent: 16px;
  --nav-link-color: rgba(0, 0, 0, 0.87);
  --nav-link-hover-color: var(--color-brand-primary);
  --nav-link-active-color: var(--color-brand-primary);
  --nav-link-font-size: 0.875rem;
  --nav-link-padding: 8px 16px;
  --nav-link-radius: 4px;
  --nav-link-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --nav-burger-font-size: 24px;
  --nav-burger-color: rgba(0, 0, 0, 0.87);
  --nav-burger-size: 24px;
  --nav-burger-margin-bottom: 0;
  --nav-dropdown-border: none;
  --nav-dropdown-link-padding: 8px 16px;
  --nav-dropdown-padding: 8px 0;
  --nav-dropdown-radius: 4px;
  --nav-padding-mobile: 8px;
  --nav-mobile-bg: var(--color-bg);
  --nav-mobile-item-border: none;
  --nav-mobile-link-padding: 12px 16px;
  --nav-mobile-max-height: calc(100vh - 64px);
  --nav-mobile-padding: 0;
  --nav-mobile-radius: 0;
  --nav-mobile-shadow: none;
  --nav-mobile-submenu-bg: rgba(0, 0, 0, 0.04);
  --nav-mobile-active-bg: rgba(33, 150, 243, 0.12);
  --nav-mobile-hover-bg: rgba(0, 0, 0, 0.04);

  /* Component: Section */
  --section-bg: var(--color-bg);
  --section-color: var(--color-text);
  --section-padding: 48px 24px;
  --section-gap: 16px;
  --section-content-max-width: 1200px;
  --section-padding-tablet: 40px 16px;
  --section-gap-tablet: 16px;
  --section-padding-mobile: 32px 16px;
  --section-bg-minor: var(--color-bg-secondary);
  --section-color-minor: rgba(0, 0, 0, 0.54);

  /* Component: Logo */
  --logo-width: auto;
  --logo-height: 40px;
  --logo-height-tablet: 36px;
  --logo-hover-opacity: 0.8;
  --logo-max-height: 48px;
  --logo-max-width: 200px;
  --logo-width-tablet: auto;

  /* ContactInfo Component */
  --contact-info-gap: 16px;
  --contact-info-item-gap: 8px;
  --contact-info-mobile-gap: 8px;
  --contact-info-color: rgba(0, 0, 0, 0.87);
  --contact-info-hover-color: var(--color-brand-primary);
  --contact-info-font-size: 0.875rem;
  --contact-info-icon-size: 18px;

  /* StickyContactIcons Variables */
  --sticky-contact-icons-right: 24px;
  --sticky-contact-icons-gap: 12px;
  --sticky-contact-icons-padding: 12px;
  --sticky-contact-icons-bg: var(--color-white);
  --sticky-contact-icons-radius: 50%;
  --sticky-contact-icons-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  --sticky-contact-icons-size: 48px;
  --sticky-contact-icons-color: rgba(0, 0, 0, 0.54);
  --sticky-contact-icons-hover-color: var(--color-brand-primary);
  --sticky-contact-icons-icon-size: 24px;
  --sticky-contact-icons-mobile-right: 16px;
  --sticky-contact-icons-mobile-bottom: 16px;
  --sticky-contact-icons-mobile-size: 40px;
  --sticky-contact-icons-mobile-icon-size: 20px;

  /* Component: Header */
  --header-bg: var(--color-brand-primary);
  --header-bg-scrolled: var(--color-brand-primary);
  --header-branding-gap: 16px;
  --header-color: var(--color-white);
  --header-height: 64px;
  --header-height-mobile: 56px;
  --header-max-width: 100%;
  --header-padding: 0 24px;
  --header-padding-mobile: 0 16px;
  --header-shadow:
    0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
  --header-shadow-scrolled:
    0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14);
  --header-title-size: 1.25rem;
  --header-title-size-mobile: 1.125rem;
  --header-title-weight: 500;
  --header-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --header-transparent-color: var(--color-white);
  --header-z-index: 1100;

  /* Component: CollapsibleHeader */
  --collapsible-header-collapsed-height: 64px;
  --collapsible-header-contact-bg: rgba(0, 0, 0, 0.04);
  --collapsible-header-contact-transition: all 200ms
    cubic-bezier(0.4, 0, 0.2, 1);
  --collapsible-header-height: 100px;
  --collapsible-header-logo-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --collapsible-header-mobile-height: 56px;
  --collapsible-header-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --collapsible-header-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Component: Footer */
  --footer-bg: #424242;
  --footer-text: rgba(255, 255, 255, 0.87);
  --footer-link-hover: var(--color-brand-primary-light);

  /* Component: PriceDisplay */
  --price-display-bg: rgba(33, 150, 243, 0.08);
  --price-display-border: 1px solid rgba(33, 150, 243, 0.24);
  --price-display-color: var(--color-brand-primary);

  /* Additional Variables */
  --color-yellow: #ffeb3b;
  --color-text-muted: rgba(0, 0, 0, 0.54);
  --transition-duration: 200ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius: 4px;
  --border-radius-default: 4px;
  --box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Material UI specific enhancements */
.default-theme .card {
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.default-theme .card:hover {
  transform: none;
  box-shadow: var(--card-hover-shadow);
}

.default-theme h1,
.default-theme h2,
.default-theme h3,
.default-theme h4,
.default-theme h5,
.default-theme h6 {
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.2;
  letter-spacing: 0;
}

/* src/styles/themes/dark-theme.css */
.dark-theme {
  /* Typography */
  --font-family-primary:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-family-heading: var(--font-family-primary);
  --font-family-base: var(--font-family-primary);
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Colors - Brand - Dark/shadcn style */
  --color-brand-primary: #f1f5f9;
  --color-brand-primary-light: #ffffff;
  --color-brand-primary-dark: #cbd5e1;
  --color-brand-secondary: #3b82f6;
  --color-brand-secondary-light: #60a5fa;
  --color-brand-secondary-dark: #2563eb;

  /* Dark mode base colors */
  --color-bg: #020617;
  --color-bg-secondary: #0f172a;
  --color-border: #1e293b;
  --color-gray-50: #0f172a;
  --color-text: #f8fafc;
  --color-text-light: #cbd5e1;
  --color-text-muted: #64748b;

  /* Component: Typography */
  --typography-color: var(--color-text);
  --typography-muted-color: var(--color-text-muted);
  --typography-margin-bottom: 1rem;
  --typography-h1-size: 2.25rem;
  --typography-h2-size: 1.875rem;
  --typography-h3-size: 1.5rem;
  --typography-h4-size: 1.25rem;
  --typography-h5-size: 1.125rem;
  --typography-h6-size: 1rem;
  --typography-body-size: 0.875rem;
  --typography-small-size: 0.75rem;

  /* Component: Button */
  --button-bg: #1e293b;
  --button-color: #f8fafc;
  --button-border: 1px solid #334155;
  --button-radius: 0.375rem;
  --button-hover-bg: #334155;
  --button-hover-border-color: #475569;
  --button-hover-color: #ffffff;
  --button-hover-shadow: none;
  --button-hover-transform: none;
  --button-active-bg: #475569;
  --button-active-border-color: #64748b;
  --button-active-transform: none;
  --button-active-shadow: none;
  --button-disabled-bg: #0f172a;
  --button-disabled-border-color: #1e293b;
  --button-disabled-color: #475569;
  --button-disabled-opacity: 1;
  --button-padding: 0.5rem 1rem;
  --button-font-size: 0.875rem;
  --button-font-family: var(--font-family-primary);
  --button-font-weight: 500;
  --button-transition: all 150ms ease;
  --button-shadow: none;
  --button-focus-shadow: 0 0 0 2px #020617, 0 0 0 4px #64748b;

  /* Primary variant */
  --button-primary-bg: #f8fafc;
  --button-primary-color: #020617;
  --button-primary-border-color: #f8fafc;
  --button-primary-hover-bg: #e2e8f0;
  --button-primary-hover-border-color: #e2e8f0;
  --button-primary-hover-color: #020617;
  --button-primary-active-bg: #cbd5e1;
  --button-primary-active-border-color: #cbd5e1;

  /* Secondary variant */
  --button-secondary-bg: transparent;
  --button-secondary-color: #f8fafc;
  --button-secondary-border-color: #334155;
  --button-secondary-hover-bg: #1e293b;
  --button-secondary-hover-border-color: #475569;
  --button-secondary-hover-color: #f8fafc;
  --button-secondary-active-bg: #334155;
  --button-secondary-active-border-color: #64748b;

  /* Text variant */
  --button-text-color: #f8fafc;
  --button-text-hover-color: #cbd5e1;
  --button-text-padding: 0.5rem;

  /* Small button styles */
  --button-padding-sm: 0.25rem 0.75rem;
  --button-font-size-sm: 0.75rem;
  --button-radius-sm: 0.25rem;
  --button-icon-size-sm: 1rem;

  /* Large button styles */
  --button-padding-lg: 0.625rem 1.5rem;
  --button-font-size-lg: 1rem;
  --button-radius-lg: 0.5rem;
  --button-icon-size-lg: 1.25rem;

  /* Icon button styles */
  --button-icon-margin: 0.5rem;
  --button-icon-padding: 0.5rem;
  --button-icon-radius: 0.375rem;
  --button-icon-size: 1rem;

  /* Outlined button styles */
  --button-outlined-color: #f8fafc;
  --button-outlined-border-color: #334155;
  --button-outlined-hover-bg: #1e293b;
  --button-outlined-hover-color: #f8fafc;
  --button-outlined-hover-border-color: #475569;

  /* Success button styles */
  --button-success-bg: #166534;
  --button-success-color: #dcfce7;
  --button-success-border-color: #166534;
  --button-success-hover-bg: #15803d;
  --button-success-hover-border-color: #15803d;
  --button-success-hover-color: #f0fdf4;

  /* Danger button styles */
  --button-danger-bg: #991b1b;
  --button-danger-color: #fef2f2;
  --button-danger-border-color: #991b1b;
  --button-danger-hover-bg: #b91c1c;
  --button-danger-hover-border-color: #b91c1c;
  --button-danger-hover-color: #ffffff;

  /* Component: Link */
  --link-color: #60a5fa;
  --link-hover-color: #93bbfc;
  --link-active-color: #3b82f6;
  --link-margin-left: 0;
  --link-margin-right: 0;
  --link-font-family: var(--font-family-primary);
  --link-transition: color 150ms ease;

  /* Component: Card */
  --card-bg: #0f172a;
  --card-color: #f8fafc;
  --card-radius: 0.5rem;
  --card-border: 1px solid #1e293b;
  --card-border-color: #1e293b;
  --card-shadow: none;
  --card-hover-border-color: #334155;
  --card-hover-shadow: none;
  --card-title-padding: 1.5rem;
  --card-title-font-size: 1.125rem;
  --card-title-font-weight: 600;
  --card-title-border: none;
  --card-content-padding: 1.5rem;
  --card-footer-padding: 1.5rem;
  --card-footer-bg: transparent;
  --card-footer-border: 1px solid #1e293b;
  --card-footer-font-size: 0.875rem;
  --card-title-padding-mobile: 1rem;
  --card-content-padding-mobile: 1rem;
  --card-footer-padding-mobile: 1rem;

  /* Component: Input */
  --input-bg: #020617;
  --input-color: #f8fafc;
  --input-border: 1px solid #334155;
  --input-radius: 0.375rem;
  --input-padding: 0.5rem 0.75rem;
  --input-font-size: 0.875rem;
  --input-font-family: var(--font-family-primary);
  --input-shadow: none;
  --input-transition: border-color 150ms ease;
  --input-placeholder-color: #64748b;
  --input-focus-border-color: #64748b;
  --input-focus-shadow: 0 0 0 2px #020617, 0 0 0 4px #334155;
  --input-disabled-bg: #0f172a;
  --input-disabled-opacity: 0.5;
  --input-valid-border-color: #166534;
  --input-valid-color: #86efac;
  --input-invalid-border-color: #991b1b;
  --input-validation-color: #fca5a5;
  --input-validation-font-size: 0.75rem;
  --input-margin-bottom: 1rem;
  --input-mobile-font-size: 16px;
  --input-mobile-padding: 0.5rem 0.75rem;

  /* Component: Select */
  --select-bg: #020617;
  --select-color: #f8fafc;
  --select-border: 1px solid #334155;
  --select-radius: 0.375rem;
  --select-padding: 0.5rem 0.75rem;
  --select-font-size: 0.875rem;
  --select-font-family: var(--font-family-primary);
  --select-shadow: none;
  --select-transition: border-color 150ms ease;
  --select-option-color: #f8fafc;
  --select-option-bg: #0f172a;
  --select-option-disabled-color: #475569;
  --select-focus-border-color: #64748b;
  --select-focus-shadow: 0 0 0 2px #020617, 0 0 0 4px #334155;
  --select-disabled-bg: #0f172a;
  --select-disabled-opacity: 0.5;
  --select-valid-border-color: #166534;
  --select-valid-color: #86efac;
  --select-invalid-border-color: #991b1b;
  --select-validation-color: #fca5a5;
  --select-validation-font-size: 0.75rem;
  --select-margin-bottom: 1rem;
  --select-mobile-font-size: 16px;
  --select-mobile-padding: 0.5rem 0.75rem;
  --select-multiple-padding: 0.25rem;
  --select-option-padding: 0.5rem 0.75rem;
  --select-option-margin: 0;

  /* Component: Checkbox */
  --checkbox-bg: #020617;
  --checkbox-border: 1px solid #475569;
  --checkbox-radius: 0.25rem;
  --checkbox-size: 1rem;
  --checkbox-color: #f8fafc;
  --checkbox-indicator-margin: 0.5rem;
  --checkbox-font-size: 0.875rem;
  --checkbox-font-family: var(--font-family-primary);
  --checkbox-transition: all 150ms ease;
  --checkbox-padding: 0;
  --checkbox-hover-border-color: #64748b;
  --checkbox-checked-bg: #f8fafc;
  --checkbox-checked-border-color: #f8fafc;
  --checkbox-focus-shadow: 0 0 0 2px #020617, 0 0 0 4px #334155;
  --checkbox-disabled-bg: #0f172a;
  --checkbox-disabled-border-color: #1e293b;
  --checkbox-disabled-color: #475569;
  --checkbox-valid-border-color: #166534;
  --checkbox-valid-color: #86efac;
  --checkbox-invalid-border-color: #991b1b;
  --checkbox-validation-color: #fca5a5;
  --checkbox-validation-font-size: 0.75rem;
  --checkbox-margin-bottom: 0.75rem;
  --checkbox-indicator-width: 3px;
  --checkbox-indicator-height: 7px;
  --checkbox-required-color: #fca5a5;
  --checkbox-indeterminate-bg: #f8fafc;
  --checkbox-indeterminate-border-color: #f8fafc;
  --checkbox-indeterminate-width: 8px;
  --checkbox-indeterminate-height: 2px;

  /* Component: Radio */
  --radio-bg: #020617;
  --radio-border: 1px solid #475569;
  --radio-size: 1rem;
  --radio-inner-size: 0.375rem;
  --radio-color: #f8fafc;
  --radio-indicator-margin: 0.5rem;
  --radio-font-size: 0.875rem;
  --radio-font-family: var(--font-family-primary);
  --radio-transition: all 150ms ease;
  --radio-padding: 0;
  --radio-hover-border-color: #64748b;
  --radio-checked-color: #f8fafc;
  --radio-checked-border-color: #f8fafc;
  --radio-focus-shadow: 0 0 0 2px #020617, 0 0 0 4px #334155;
  --radio-disabled-bg: #0f172a;
  --radio-disabled-border-color: #1e293b;
  --radio-disabled-color: #475569;
  --radio-disabled-checked-color: #475569;
  --radio-margin-bottom: 0.75rem;
  --radio-required-color: #fca5a5;

  /* Component: Radio Group */
  --radio-group-margin-bottom: 1rem;
  --radio-group-padding: 0;
  --radio-group-border: none;
  --radio-group-radius: 0;
  --radio-group-legend-font-size: 0.875rem;
  --radio-group-legend-color: #cbd5e1;
  --radio-group-font-family: var(--font-family-primary);
  --radio-group-legend-font-weight: 500;
  --radio-group-legend-padding: 0;
  --radio-group-legend-margin-bottom: 0.5rem;
  --radio-group-required-color: #fca5a5;
  --radio-group-gap: 0.5rem;
  --radio-group-valid-border-color: #166534;
  --radio-group-invalid-border-color: #991b1b;
  --radio-group-validation-color: #fca5a5;
  --radio-group-validation-font-size: 0.75rem;
  --radio-group-disabled-opacity: 0.5;
  --radio-group-disabled-bg: transparent;

  /* Component: Form Group */
  --form-group-margin-bottom: 1rem;
  --form-group-label-font-size: 0.875rem;
  --form-group-label-color: #e2e8f0;
  --form-group-font-family: var(--font-family-primary);
  --form-group-label-font-weight: 500;
  --form-group-label-margin-bottom: 0.5rem;
  --form-group-required-color: #fca5a5;
  --form-group-help-font-size: 0.75rem;
  --form-group-help-color: #64748b;
  --form-group-label-margin-right: 1rem;
  --form-group-label-margin-left: 1rem;
  --form-group-label-width: 30%;

  /* Component: Form */
  --form-label-width: 30%;
  --form-section-margin-bottom: 2rem;
  --form-section-title-font-size: 1.125rem;
  --form-section-title-color: #f8fafc;
  --form-section-title-font-weight: 600;
  --form-section-title-margin-bottom: 1rem;
  --form-section-title-border: none;
  --form-section-description-font-size: 0.875rem;
  --form-section-description-color: #64748b;
  --form-section-description-margin-bottom: 1rem;
  --form-actions-gap: 0.5rem;
  --form-actions-margin-top: 1.5rem;
  --form-actions-justify: flex-end;

  /* Component: Navigation */
  --nav-bg: #020617;
  --nav-border-bottom: 1px solid #1e293b;
  --nav-dropdown-bg: #0f172a;
  --nav-dropdown-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --nav-padding: 0 1rem;
  --nav-margin-right: 0;
  --nav-font-size: 0.875rem;
  --nav-line-height: 1.5;
  --nav-active-font-weight: 500;
  --nav-focus-shadow: none;
  --nav-item-spacing: 1.5rem;
  --nav-item-spacing-vertical: 0.5rem;
  --nav-submenu-indent: 1rem;
  --nav-link-color: #cbd5e1;
  --nav-link-hover-color: #f8fafc;
  --nav-link-active-color: #f8fafc;
  --nav-link-font-size: 0.875rem;
  --nav-link-padding: 0.5rem 0.75rem;
  --nav-link-radius: 0.375rem;
  --nav-link-transition: all 150ms ease;
  --nav-burger-font-size: 1.25rem;
  --nav-burger-color: #f8fafc;
  --nav-burger-size: 1.25rem;
  --nav-burger-margin-bottom: 0;
  --nav-dropdown-border: 1px solid #1e293b;
  --nav-dropdown-link-padding: 0.5rem 1rem;
  --nav-dropdown-padding: 0.5rem;
  --nav-dropdown-radius: 0.375rem;
  --nav-padding-mobile: 0.5rem;
  --nav-mobile-bg: #020617;
  --nav-mobile-item-border: none;
  --nav-mobile-link-padding: 0.75rem 1rem;
  --nav-mobile-max-height: calc(100vh - 64px);
  --nav-mobile-padding: 0;
  --nav-mobile-radius: 0;
  --nav-mobile-shadow: none;
  --nav-mobile-submenu-bg: #0f172a;
  --nav-mobile-active-bg: #1e293b;
  --nav-mobile-hover-bg: #1e293b;

  /* Component: Section */
  --section-bg: #020617;
  --section-color: #f8fafc;
  --section-padding: 3rem 1.5rem;
  --section-gap: 1rem;
  --section-content-max-width: 80rem;
  --section-padding-tablet: 2.5rem 1rem;
  --section-gap-tablet: 1rem;
  --section-padding-mobile: 2rem 1rem;
  --section-bg-minor: #0f172a;
  --section-color-minor: #64748b;

  /* Component: Logo */
  --logo-width: auto;
  --logo-height: 2rem;
  --logo-height-tablet: 1.75rem;
  --logo-hover-opacity: 0.8;
  --logo-max-height: 3rem;
  --logo-max-width: 12rem;
  --logo-width-tablet: auto;

  /* ContactInfo Component */
  --contact-info-gap: 1rem;
  --contact-info-item-gap: 0.5rem;
  --contact-info-mobile-gap: 0.5rem;
  --contact-info-color: #cbd5e1;
  --contact-info-hover-color: #f8fafc;
  --contact-info-font-size: 0.875rem;
  --contact-info-icon-size: 1rem;

  /* StickyContactIcons Variables */
  --sticky-contact-icons-right: 1.5rem;
  --sticky-contact-icons-gap: 0.75rem;
  --sticky-contact-icons-padding: 0.75rem;
  --sticky-contact-icons-bg: #1e293b;
  --sticky-contact-icons-radius: 0.5rem;
  --sticky-contact-icons-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --sticky-contact-icons-size: 2.5rem;
  --sticky-contact-icons-color: #cbd5e1;
  --sticky-contact-icons-hover-color: #f8fafc;
  --sticky-contact-icons-icon-size: 1.25rem;
  --sticky-contact-icons-mobile-right: 1rem;
  --sticky-contact-icons-mobile-bottom: 1rem;
  --sticky-contact-icons-mobile-size: 2.25rem;
  --sticky-contact-icons-mobile-icon-size: 1rem;

  /* Component: Header */
  --header-bg: #0f172a;
  --header-bg-scrolled: #020617;
  --header-branding-gap: 1rem;
  --header-color: #f8fafc;
  --header-height: 4rem;
  --header-height-mobile: 3.5rem;
  --header-max-width: 100%;
  --header-padding: 0 1.5rem;
  --header-padding-mobile: 0 1rem;
  --header-shadow: none;
  --header-shadow-scrolled: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  --header-title-size: 1.125rem;
  --header-title-size-mobile: 1rem;
  --header-title-weight: 600;
  --header-transition: all 150ms ease;
  --header-transparent-color: #f8fafc;
  --header-z-index: 50;

  /* Component: CollapsibleHeader */
  --collapsible-header-collapsed-height: 4rem;
  --collapsible-header-contact-bg: #0f172a;
  --collapsible-header-contact-transition: all 150ms ease;
  --collapsible-header-height: 6rem;
  --collapsible-header-logo-transition: all 150ms ease;
  --collapsible-header-mobile-height: 3.5rem;
  --collapsible-header-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  --collapsible-header-transition: all 150ms ease;

  /* Component: Footer */
  --footer-bg: #0f172a;
  --footer-text: #94a3b8;
  --footer-link-hover: #f8fafc;

  /* Component: PriceDisplay */
  --price-display-bg: rgba(59, 130, 246, 0.1);
  --price-display-border: 1px solid rgba(59, 130, 246, 0.3);
  --price-display-color: #60a5fa;

  /* Additional Variables */
  --color-yellow: #fbbf24;
  --transition-duration: 150ms;
  --transition-timing: ease;
  --border-radius: 0.375rem;
  --border-radius-default: 0.375rem;
  --box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Dark theme specific styles */
.dark-theme * {
  border-color: var(--color-border);
}

.dark-theme .card {
  transition: border-color 150ms ease;
}

.dark-theme .card:hover {
  transform: none;
}


/* src/styles/themes/cabalou-theme.css */
.cabalou-theme {
  /* Typography */
  --font-family-primary: 'questa-grande', serif;
  --font-family-heading: 'copperplate', serif;

  /* Colors - Brand */
  --color-brand-primary: #accf4e;
  --color-brand-primary-dark: #354914;
  --color-brand-secondary: #8f3557;
  --color-brand-secondary-dark: #4a1a2c;
  --color-brand-secondary-light: #e3cad4;

  /* Component: Button */
  --button-bg: var(--color-brand-primary);
  --button-color: var(--color-text-white);
  --button-border: 2px solid var(--color-text-white);
  --button-radius: 0;
  --button-hover-bg: var(--color-brand-primary-dark);
  --button-active-bg: var(--color-brand-primary-dark);
  --button-disabled-bg: var(--color-gray-600);
  --button-padding: var(--space-3) var(--space-12);
  --button-font-size: var(--font-size-2xl);
  --button-font-family: var(--font-family-primary);
  --button-font-weight: var(--font-weight-medium);
  --button-transition: var(--transition-normal);
  --button-primary-bg: var(--color-brand-primary);
  --button-primary-color: var(--color-text-white);
  --button-secondary-bg: var(--color-brand-secondary);
  --button-secondary-color: var(--color-text-white);
  --button-text-color: var(--color-brand-primary);
  --button-text-hover-color: var(--color-brand-primary-dark);
  --button-padding-sm: var(--space-2) var(--space-10);
  --button-padding-lg: var(--space-4) var(--space-14);
  --button-font-size-sm: var(--font-size-xl);
  --button-font-size-lg: var(--font-size-3xl);

  /* Component: Link */
  --link-color: var(--color-brand-primary);
  --link-hover-color: var(--color-brand-primary-dark);
  --link-active-color: var(--color-brand-primary-dark);
  --link-margin-left: 0;
  --link-margin-right: var(--space-1);
  --link-font-family: var(--font-family-primary);
  --link-transition: var(--transition-fast);

  /* Component: Navigation */
  --nav-bg: transparent;
  --nav-border-bottom: 1px solid transparent;
  --nav-link-color: var(--color-text-dark);
  --nav-link-hover-color: var(--color-brand-secondary);
  --nav-link-active-color: var(--color-brand-secondary);
  --nav-dropdown-bg: var(--color-brand-secondary-dark);
  --nav-padding: var(--space-2);
  --nav-margin-right: var(--space-10);
  --nav-burger-font-size: var(--font-size-2xl);
  --nav-burger-margin-bottom: var(--space-2);
  --nav-padding-mobile: var(--space-2) 0;
  --nav-link-font-size: var(--font-size-2xl);

  /* Component: Section */
  --section-bg: var(--color-brand-secondary-dark);
  --section-color: var(--color-text-white);
  --section-padding: var(--space-2);
  --section-gap: var(--space-2);
  --section-content-max-width: var(--container-max-width);
  --section-padding-tablet: var(--space-1);
  --section-gap-tablet: var(--space-1);
  --section-padding-mobile: var(--space-1);

  /* Component: Typography */
  --typography-color: var(--color-text);
  --typography-muted-color: var(--color-text-light);
  --typography-margin-bottom: var(--space-4);
  --typography-h1-size: var(--font-size-6xl);
  --typography-h2-size: var(--font-size-4xl);
  --typography-h3-size: var(--font-size-3xl);
  --typography-h4-size: var(--font-size-2xl);
  --typography-h5-size: var(--font-size-xl);
  --typography-h6-size: var(--font-size-lg);
  --typography-body-size: var(--font-size-base);
  --typography-small-size: var(--font-size-sm);

  /* Component: Logo */
  --logo-width: 100px;
  --logo-height: 100px;

  /* Component: Card */
  --card-bg: var(--color-brand-secondary-dark);
  --card-color: var(--color-text-white);
  --card-radius: 0;
  --card-border: 2px solid var(--color-brand-primary);
  --card-border-color: var(--color-brand-primary);
  --card-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
  --card-hover-border-color: var(--color-brand-primary-dark);
  --card-title-padding: var(--space-6);
  --card-title-font-size: var(--font-size-3xl);
  --card-title-font-weight: var(--font-weight-bold);
  --card-title-border: 1px solid var(--color-brand-primary);
  --card-content-padding: var(--space-6);
  --card-footer-padding: var(--space-4) var(--space-6);
  --card-footer-bg: var(--color-brand-secondary);
  --card-footer-border: 1px solid var(--color-brand-primary);
  --card-footer-font-size: var(--font-size-lg);
  --card-title-padding-mobile: var(--space-4);
  --card-content-padding-mobile: var(--space-4);
  --card-footer-padding-mobile: var(--space-3) var(--space-4);

  /* Component: Input */
  --input-bg: var(--color-brand-secondary-dark);
  --input-color: var(--color-text-white);
  --input-border: 2px solid var(--color-brand-primary);
  --input-radius: 0;
  --input-padding: var(--space-3) var(--space-4);
  --input-font-size: var(--font-size-lg);
  --input-font-family: var(--font-family-primary);
  --input-shadow: none;
  --input-transition: all 0.3s ease-in-out;
  --input-placeholder-color: var(--color-gray-400);
  --input-focus-border-color: var(--color-brand-primary-dark);
  --input-focus-shadow: 0 0 0 0.2rem rgba(172, 207, 78, 0.25);
  --input-disabled-bg: var(--color-gray-700);
  --input-disabled-opacity: 0.7;
  --input-valid-border-color: var(--color-brand-primary);
  --input-invalid-border-color: var(--color-danger);
  --input-validation-color: var(--color-danger);
  --input-validation-font-size: var(--font-size-base);
  --input-margin-bottom: var(--space-5);

  /* Component: Select */
  --select-bg: var(--color-brand-secondary-dark);
  --select-color: var(--color-text-white);
  --select-border: 2px solid var(--color-brand-primary);
  --select-radius: 0;
  --select-padding: var(--space-3) var(--space-4);
  --select-font-size: var(--font-size-lg);
  --select-font-family: var(--font-family-primary);
  --select-shadow: none;
  --select-transition: all 0.3s ease-in-out;
  --select-option-color: var(--color-text-dark);
  --select-option-bg: var(--color-bg);
  --select-option-disabled-color: var(--color-gray-500);
  --select-focus-border-color: var(--color-brand-primary-dark);
  --select-focus-shadow: 0 0 0 0.2rem rgba(172, 207, 78, 0.25);
  --select-disabled-bg: var(--color-gray-700);
  --select-disabled-opacity: 0.7;
  --select-valid-border-color: var(--color-brand-primary);
  --select-invalid-border-color: var(--color-danger);
  --select-validation-color: var(--color-danger);
  --select-validation-font-size: var(--font-size-base);
  --select-margin-bottom: var(--space-5);
  --select-option-padding: var(--space-2) var(--space-3);

  /* Component: Checkbox */
  --checkbox-bg: var(--color-brand-secondary-dark);
  --checkbox-border: 2px solid var(--color-brand-primary);
  --checkbox-radius: 0;
  --checkbox-size: 24px;
  --checkbox-color: var(--color-text-white);
  --checkbox-indicator-margin: var(--space-3);
  --checkbox-font-size: var(--font-size-lg);
  --checkbox-font-family: var(--font-family-primary);
  --checkbox-transition: all 0.3s ease-in-out;
  --checkbox-hover-border-color: var(--color-brand-primary-dark);
  --checkbox-checked-bg: var(--color-brand-primary);
  --checkbox-checked-border-color: var(--color-brand-primary);
  --checkbox-focus-shadow: 0 0 0 0.2rem rgba(172, 207, 78, 0.25);
  --checkbox-disabled-bg: var(--color-gray-700);
  --checkbox-disabled-border-color: var(--color-gray-500);
  --checkbox-disabled-color: var(--color-gray-400);
  --checkbox-valid-border-color: var(--color-brand-primary);
  --checkbox-invalid-border-color: var(--color-danger);
  --checkbox-validation-color: var(--color-danger);
  --checkbox-margin-bottom: var(--space-4);
  --checkbox-required-color: var(--color-danger);

  /* Component: Radio */
  --radio-bg: var(--color-brand-secondary-dark);
  --radio-border: 2px solid var(--color-brand-primary);
  --radio-size: 24px;
  --radio-inner-size: 12px;
  --radio-color: var(--color-text-white);
  --radio-indicator-margin: var(--space-3);
  --radio-font-size: var(--font-size-lg);
  --radio-font-family: var(--font-family-primary);
  --radio-transition: all 0.3s ease-in-out;
  --radio-hover-border-color: var(--color-brand-primary-dark);
  --radio-checked-color: var(--color-brand-primary);
  --radio-checked-border-color: var(--color-brand-primary);
  --radio-focus-shadow: 0 0 0 0.2rem rgba(172, 207, 78, 0.25);
  --radio-disabled-bg: var(--color-gray-700);
  --radio-disabled-border-color: var(--color-gray-500);
  --radio-disabled-color: var(--color-gray-400);
  --radio-disabled-checked-color: var(--color-gray-300);
  --radio-margin-bottom: var(--space-4);
  --radio-required-color: var(--color-danger);

  /* Component: Radio Group */
  --radio-group-margin-bottom: var(--space-5);
  --radio-group-padding: var(--space-4);
  --radio-group-border: 2px solid var(--color-brand-primary);
  --radio-group-radius: 0;
  --radio-group-legend-font-size: var(--font-size-xl);
  --radio-group-legend-color: var(--color-text-white);
  --radio-group-font-family: var(--font-family-heading);
  --radio-group-legend-font-weight: var(--font-weight-bold);
  --radio-group-legend-padding: 0 var(--space-3);
  --radio-group-legend-margin-bottom: var(--space-3);
  --radio-group-required-color: var(--color-danger);
  --radio-group-gap: var(--space-3);
  --radio-group-valid-border-color: var(--color-brand-primary);
  --radio-group-invalid-border-color: var(--color-danger);
  --radio-group-validation-color: var(--color-danger);
  --radio-group-validation-font-size: var(--font-size-base);
  --radio-group-disabled-opacity: 0.7;
  --radio-group-disabled-bg: var(--color-gray-800);

  /* Component: Form Group */
  --form-group-margin-bottom: var(--space-5);
  --form-group-label-font-size: var(--font-size-lg);
  --form-group-label-color: var(--color-text-white);
  --form-group-font-family: var(--font-family-heading);
  --form-group-label-font-weight: var(--font-weight-bold);
  --form-group-label-margin-bottom: var(--space-2);
  --form-group-required-color: var(--color-danger);
  --form-group-help-font-size: var(--font-size-base);
  --form-group-help-color: var(--color-gray-300);
  --form-group-label-margin-right: var(--space-4);
  --form-group-label-margin-left: var(--space-4);
  --form-group-label-width: 40%;

  /* Component: Form */
  --form-label-width: 40%;
  --form-section-margin-bottom: var(--space-8);
  --form-section-title-font-size: var(--font-size-2xl);
  --form-section-title-color: var(--color-text-white);
  --form-section-title-font-weight: var(--font-weight-bold);
  --form-section-title-margin-bottom: var(--space-4);
  --form-section-title-border: 2px solid var(--color-brand-primary);
  --form-section-description-font-size: var(--font-size-lg);
  --form-section-description-color: var(--color-gray-300);
  --form-section-description-margin-bottom: var(--space-4);
  --form-actions-gap: var(--space-4);
  --form-actions-margin-top: var(--space-6);
  --form-actions-justify: flex-end;
}

.cabalou-theme h1 {
  font-family: var(--font-family-heading);
}

.cabalou-theme .card__title {
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cabalou-theme .form-section__title {
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: var(--space-2);

  /* TODO: Define value for 'border-radius-default' in cabalou theme */
  --border-radius-default: inherit;
  /* TODO: Define value for 'box-shadow-sm' in cabalou theme */
  --box-shadow-sm: inherit;
  /* TODO: Define value for 'button-active-border-color' in cabalou theme */
  --button-active-border-color: inherit;
  /* TODO: Define value for 'button-active-shadow' in cabalou theme */
  --button-active-shadow: inherit;
  /* TODO: Define value for 'button-active-transform' in cabalou theme */
  --button-active-transform: inherit;
  /* TODO: Define value for 'button-danger-bg' in cabalou theme */
  --button-danger-bg: inherit;
  /* TODO: Define value for 'button-danger-color' in cabalou theme */
  --button-danger-color: inherit;
  /* TODO: Define value for 'button-danger-hover-bg' in cabalou theme */
  --button-danger-hover-bg: inherit;
  /* TODO: Define value for 'button-disabled-border-color' in cabalou theme */
  --button-disabled-border-color: inherit;
  /* TODO: Define value for 'button-disabled-color' in cabalou theme */
  --button-disabled-color: inherit;
  /* TODO: Define value for 'button-disabled-opacity' in cabalou theme */
  --button-disabled-opacity: inherit;
  /* TODO: Define value for 'button-focus-shadow' in cabalou theme */
  --button-focus-shadow: inherit;
  /* TODO: Define value for 'button-hover-border-color' in cabalou theme */
  --button-hover-border-color: inherit;
  /* TODO: Define value for 'button-hover-color' in cabalou theme */
  --button-hover-color: inherit;
  /* TODO: Define value for 'button-hover-shadow' in cabalou theme */
  --button-hover-shadow: inherit;
  /* TODO: Define value for 'button-icon-margin' in cabalou theme */
  --button-icon-margin: inherit;
  /* TODO: Define value for 'button-icon-radius' in cabalou theme */
  --button-icon-radius: inherit;
  /* TODO: Define value for 'button-icon-size' in cabalou theme */
  --button-icon-size: inherit;
  /* TODO: Define value for 'button-icon-size-lg' in cabalou theme */
  --button-icon-size-lg: inherit;
  /* TODO: Define value for 'button-icon-size-sm' in cabalou theme */
  --button-icon-size-sm: inherit;
  /* TODO: Define value for 'button-outlined-color' in cabalou theme */
  --button-outlined-color: inherit;
  /* TODO: Define value for 'button-outlined-hover-bg' in cabalou theme */
  --button-outlined-hover-bg: inherit;
  /* TODO: Define value for 'button-outlined-hover-color' in cabalou theme */
  --button-outlined-hover-color: inherit;
  /* TODO: Define value for 'button-primary-active-bg' in cabalou theme */
  --button-primary-active-bg: inherit;
  /* TODO: Define value for 'button-primary-hover-bg' in cabalou theme */
  --button-primary-hover-bg: inherit;
  /* TODO: Define value for 'button-secondary-active-bg' in cabalou theme */
  --button-secondary-active-bg: inherit;
  /* TODO: Define value for 'button-secondary-hover-bg' in cabalou theme */
  --button-secondary-hover-bg: inherit;
  /* TODO: Define value for 'button-shadow' in cabalou theme */
  --button-shadow: inherit;
  /* TODO: Define value for 'button-success-bg' in cabalou theme */
  --button-success-bg: inherit;
  /* TODO: Define value for 'button-success-color' in cabalou theme */
  --button-success-color: inherit;
  /* TODO: Define value for 'button-success-hover-bg' in cabalou theme */
  --button-success-hover-bg: inherit;
  /* TODO: Define value for 'button-text-padding' in cabalou theme */
  --button-text-padding: inherit;
  /* TODO: Define value for 'checkbox-indeterminate-height' in cabalou theme */
  --checkbox-indeterminate-height: inherit;
  /* TODO: Define value for 'checkbox-indeterminate-width' in cabalou theme */
  --checkbox-indeterminate-width: inherit;
  /* TODO: Define value for 'checkbox-indicator-height' in cabalou theme */
  --checkbox-indicator-height: inherit;
  /* TODO: Define value for 'checkbox-indicator-width' in cabalou theme */
  --checkbox-indicator-width: inherit;
  /* TODO: Define value for 'checkbox-padding' in cabalou theme */
  --checkbox-padding: inherit;
  /* TODO: Define value for 'checkbox-valid-color' in cabalou theme */
  --checkbox-valid-color: inherit;
  /* TODO: Define value for 'checkbox-validation-font-size' in cabalou theme */
  --checkbox-validation-font-size: inherit;
  /* TODO: Define value for 'color-text-muted' in cabalou theme */
  --color-text-muted: inherit;
  /* TODO: Define value for 'color-yellow' in cabalou theme */
  --color-yellow: inherit;
  /* TODO: Define value for 'font-family-base' in cabalou theme */
  --font-family-base: inherit;
  /* TODO: Define value for 'font-size-14' in cabalou theme */
  --font-size-14: inherit;
  /* TODO: Define value for 'font-size-16' in cabalou theme */
  --font-size-16: inherit;
  /* TODO: Define value for 'font-size-18' in cabalou theme */
  --font-size-18: inherit;
  /* TODO: Define value for 'font-size-20' in cabalou theme */
  --font-size-20: inherit;
  /* TODO: Define value for 'font-size-24' in cabalou theme */
  --font-size-24: inherit;
  /* TODO: Define value for 'font-size-32' in cabalou theme */
  --font-size-32: inherit;
  /* TODO: Define value for 'header-bg' in cabalou theme */
  --header-bg: inherit;
  /* TODO: Define value for 'header-bg-scrolled' in cabalou theme */
  --header-bg-scrolled: inherit;
  /* TODO: Define value for 'header-branding-gap' in cabalou theme */
  --header-branding-gap: inherit;
  /* TODO: Define value for 'header-color' in cabalou theme */
  --header-color: inherit;
  /* TODO: Define value for 'header-height' in cabalou theme */
  --header-height: inherit;
  /* TODO: Define value for 'header-height-mobile' in cabalou theme */
  --header-height-mobile: inherit;
  /* TODO: Define value for 'header-max-width' in cabalou theme */
  --header-max-width: inherit;
  /* TODO: Define value for 'header-padding' in cabalou theme */
  --header-padding: inherit;
  /* TODO: Define value for 'header-padding-mobile' in cabalou theme */
  --header-padding-mobile: inherit;
  /* TODO: Define value for 'header-shadow' in cabalou theme */
  --header-shadow: inherit;
  /* TODO: Define value for 'header-shadow-scrolled' in cabalou theme */
  --header-shadow-scrolled: inherit;
  /* TODO: Define value for 'header-title-size' in cabalou theme */
  --header-title-size: inherit;
  /* TODO: Define value for 'header-title-size-mobile' in cabalou theme */
  --header-title-size-mobile: inherit;
  /* TODO: Define value for 'header-title-weight' in cabalou theme */
  --header-title-weight: inherit;
  /* TODO: Define value for 'header-transition' in cabalou theme */
  --header-transition: inherit;
  /* TODO: Define value for 'header-transparent-color' in cabalou theme */
  --header-transparent-color: inherit;
  /* TODO: Define value for 'header-z-index' in cabalou theme */
  --header-z-index: inherit;
  /* TODO: Define value for 'input-mobile-font-size' in cabalou theme */
  --input-mobile-font-size: inherit;
  /* TODO: Define value for 'input-mobile-padding' in cabalou theme */
  --input-mobile-padding: inherit;
  /* TODO: Define value for 'input-valid-color' in cabalou theme */
  --input-valid-color: inherit;
  /* TODO: Define value for 'logo-height-tablet' in cabalou theme */
  --logo-height-tablet: inherit;
  /* TODO: Define value for 'logo-hover-opacity' in cabalou theme */
  --logo-hover-opacity: inherit;
  /* TODO: Define value for 'logo-max-height' in cabalou theme */
  --logo-max-height: inherit;
  /* TODO: Define value for 'logo-max-width' in cabalou theme */
  --logo-max-width: inherit;
  /* TODO: Define value for 'logo-width-tablet' in cabalou theme */
  --logo-width-tablet: inherit;
  /* TODO: Define value for 'nav-active-font-weight' in cabalou theme */
  --nav-active-font-weight: inherit;
  /* TODO: Define value for 'nav-burger-color' in cabalou theme */
  --nav-burger-color: inherit;
  /* TODO: Define value for 'nav-burger-size' in cabalou theme */
  --nav-burger-size: inherit;
  /* TODO: Define value for 'nav-dropdown-border' in cabalou theme */
  --nav-dropdown-border: inherit;
  /* TODO: Define value for 'nav-dropdown-link-padding' in cabalou theme */
  --nav-dropdown-link-padding: inherit;
  /* TODO: Define value for 'nav-dropdown-padding' in cabalou theme */
  --nav-dropdown-padding: inherit;
  /* TODO: Define value for 'nav-dropdown-radius' in cabalou theme */
  --nav-dropdown-radius: inherit;
  /* TODO: Define value for 'nav-dropdown-shadow' in cabalou theme */
  --nav-dropdown-shadow: inherit;
  /* TODO: Define value for 'nav-focus-shadow' in cabalou theme */
  --nav-focus-shadow: inherit;
  /* TODO: Define value for 'nav-font-size' in cabalou theme */
  --nav-font-size: inherit;
  /* TODO: Define value for 'nav-item-spacing' in cabalou theme */
  --nav-item-spacing: inherit;
  /* TODO: Define value for 'nav-line-height' in cabalou theme */
  --nav-line-height: inherit;
  /* TODO: Define value for 'nav-link-padding' in cabalou theme */
  --nav-link-padding: inherit;
  /* TODO: Define value for 'nav-link-radius' in cabalou theme */
  --nav-link-radius: inherit;
  /* TODO: Define value for 'nav-link-transition' in cabalou theme */
  --nav-link-transition: inherit;
  /* TODO: Define value for 'nav-mobile-bg' in cabalou theme */
  --nav-mobile-bg: inherit;
  /* TODO: Define value for 'nav-mobile-item-border' in cabalou theme */
  --nav-mobile-item-border: inherit;
  /* TODO: Define value for 'nav-mobile-link-padding' in cabalou theme */
  --nav-mobile-link-padding: inherit;
  /* TODO: Define value for 'nav-mobile-max-height' in cabalou theme */
  --nav-mobile-max-height: inherit;
  /* TODO: Define value for 'nav-mobile-padding' in cabalou theme */
  --nav-mobile-padding: inherit;
  /* TODO: Define value for 'nav-mobile-radius' in cabalou theme */
  --nav-mobile-radius: inherit;
  /* TODO: Define value for 'nav-mobile-shadow' in cabalou theme */
  --nav-mobile-shadow: inherit;
  /* TODO: Define value for 'nav-mobile-submenu-bg' in cabalou theme */
  --nav-mobile-submenu-bg: inherit;
  /* TODO: Define value for 'nav-submenu-indent' in cabalou theme */
  --nav-submenu-indent: inherit;
  /* TODO: Define value for 'price-display-bg' in cabalou theme */
  --price-display-bg: inherit;
  /* TODO: Define value for 'price-display-border' in cabalou theme */
  --price-display-border: inherit;
  /* TODO: Define value for 'price-display-color' in cabalou theme */
  --price-display-color: inherit;
  /* TODO: Define value for 'radio-padding' in cabalou theme */
  --radio-padding: inherit;
  /* TODO: Define value for 'section-bg-minor' in cabalou theme */
  --section-bg-minor: inherit;
  /* TODO: Define value for 'section-color-minor' in cabalou theme */
  --section-color-minor: inherit;
  /* TODO: Define value for 'select-mobile-font-size' in cabalou theme */
  --select-mobile-font-size: inherit;
  /* TODO: Define value for 'select-multiple-padding' in cabalou theme */
  --select-multiple-padding: inherit;
  /* TODO: Define value for 'select-option-margin' in cabalou theme */
  --select-option-margin: inherit;
  /* TODO: Define value for 'select-valid-color' in cabalou theme */
  --select-valid-color: inherit;
  /* TODO: Define value for 'border-radius' in cabalou theme */
  --border-radius: inherit;
  /* TODO: Define value for 'button-danger-border-color' in cabalou theme */
  --button-danger-border-color: inherit;
  /* TODO: Define value for 'button-danger-hover-border-color' in cabalou theme */
  --button-danger-hover-border-color: inherit;
  /* TODO: Define value for 'button-hover-transform' in cabalou theme */
  --button-hover-transform: inherit;
  /* TODO: Define value for 'button-outlined-border-color' in cabalou theme */
  --button-outlined-border-color: inherit;
  /* TODO: Define value for 'button-outlined-hover-border-color' in cabalou theme */
  --button-outlined-hover-border-color: inherit;
  /* TODO: Define value for 'button-primary-active-border-color' in cabalou theme */
  --button-primary-active-border-color: inherit;
  /* TODO: Define value for 'button-primary-border-color' in cabalou theme */
  --button-primary-border-color: inherit;
  /* TODO: Define value for 'button-primary-hover-border-color' in cabalou theme */
  --button-primary-hover-border-color: inherit;
  /* TODO: Define value for 'button-radius-lg' in cabalou theme */
  --button-radius-lg: inherit;
  /* TODO: Define value for 'button-radius-sm' in cabalou theme */
  --button-radius-sm: inherit;
  /* TODO: Define value for 'button-secondary-active-border-color' in cabalou theme */
  --button-secondary-active-border-color: inherit;
  /* TODO: Define value for 'button-secondary-border-color' in cabalou theme */
  --button-secondary-border-color: inherit;
  /* TODO: Define value for 'button-secondary-hover-border-color' in cabalou theme */
  --button-secondary-hover-border-color: inherit;
  /* TODO: Define value for 'button-success-border-color' in cabalou theme */
  --button-success-border-color: inherit;
  /* TODO: Define value for 'button-success-hover-border-color' in cabalou theme */
  --button-success-hover-border-color: inherit;
  /* TODO: Define value for 'collapsible-header-collapsed-height' in cabalou theme */
  --collapsible-header-collapsed-height: inherit;
  /* TODO: Define value for 'collapsible-header-contact-bg' in cabalou theme */
  --collapsible-header-contact-bg: inherit;
  /* TODO: Define value for 'collapsible-header-contact-transition' in cabalou theme */
  --collapsible-header-contact-transition: inherit;
  /* TODO: Define value for 'collapsible-header-height' in cabalou theme */
  --collapsible-header-height: inherit;
  /* TODO: Define value for 'collapsible-header-logo-transition' in cabalou theme */
  --collapsible-header-logo-transition: inherit;
  /* TODO: Define value for 'collapsible-header-mobile-height' in cabalou theme */
  --collapsible-header-mobile-height: inherit;
  /* TODO: Define value for 'collapsible-header-shadow' in cabalou theme */
  --collapsible-header-shadow: inherit;
  /* TODO: Define value for 'collapsible-header-transition' in cabalou theme */
  --collapsible-header-transition: inherit;
  /* TODO: Define value for 'color-bg-secondary' in cabalou theme */
  --color-bg-secondary: inherit;
  /* TODO: Define value for 'color-border' in cabalou theme */
  --color-border: inherit;
  /* TODO: Define value for 'color-gray-50' in cabalou theme */
  --color-gray-50: inherit;
  /* TODO: Define value for 'contact-info-color' in cabalou theme */
  --contact-info-color: inherit;
  /* TODO: Define value for 'contact-info-font-size' in cabalou theme */
  --contact-info-font-size: inherit;
  /* TODO: Define value for 'contact-info-gap' in cabalou theme */
  --contact-info-gap: inherit;
  /* TODO: Define value for 'contact-info-hover-color' in cabalou theme */
  --contact-info-hover-color: inherit;
  /* TODO: Define value for 'contact-info-icon-size' in cabalou theme */
  --contact-info-icon-size: inherit;
  /* TODO: Define value for 'contact-info-item-gap' in cabalou theme */
  --contact-info-item-gap: inherit;
  /* TODO: Define value for 'contact-info-mobile-gap' in cabalou theme */
  --contact-info-mobile-gap: inherit;
  /* TODO: Define value for 'font-family-mono' in cabalou theme */
  --font-family-mono: inherit;
  /* TODO: Define value for 'footer-bg' in cabalou theme */
  --footer-bg: inherit;
  /* TODO: Define value for 'footer-link-hover' in cabalou theme */
  --footer-link-hover: inherit;
  /* TODO: Define value for 'footer-text' in cabalou theme */
  --footer-text: inherit;
  /* TODO: Define value for 'nav-mobile-active-bg' in cabalou theme */
  --nav-mobile-active-bg: inherit;
  /* TODO: Define value for 'nav-mobile-hover-bg' in cabalou theme */
  --nav-mobile-hover-bg: inherit;
  /* TODO: Define value for 'sticky-contact-icons-bg' in cabalou theme */
  --sticky-contact-icons-bg: inherit;
  /* TODO: Define value for 'sticky-contact-icons-color' in cabalou theme */
  --sticky-contact-icons-color: inherit;
  /* TODO: Define value for 'sticky-contact-icons-gap' in cabalou theme */
  --sticky-contact-icons-gap: inherit;
  /* TODO: Define value for 'sticky-contact-icons-hover-color' in cabalou theme */
  --sticky-contact-icons-hover-color: inherit;
  /* TODO: Define value for 'sticky-contact-icons-icon-size' in cabalou theme */
  --sticky-contact-icons-icon-size: inherit;
  /* TODO: Define value for 'sticky-contact-icons-mobile-bottom' in cabalou theme */
  --sticky-contact-icons-mobile-bottom: inherit;
  /* TODO: Define value for 'sticky-contact-icons-mobile-icon-size' in cabalou theme */
  --sticky-contact-icons-mobile-icon-size: inherit;
  /* TODO: Define value for 'sticky-contact-icons-mobile-right' in cabalou theme */
  --sticky-contact-icons-mobile-right: inherit;
  /* TODO: Define value for 'sticky-contact-icons-mobile-size' in cabalou theme */
  --sticky-contact-icons-mobile-size: inherit;
  /* TODO: Define value for 'sticky-contact-icons-padding' in cabalou theme */
  --sticky-contact-icons-padding: inherit;
  /* TODO: Define value for 'sticky-contact-icons-right' in cabalou theme */
  --sticky-contact-icons-right: inherit;
  /* TODO: Define value for 'sticky-contact-icons-shadow' in cabalou theme */
  --sticky-contact-icons-shadow: inherit;
  /* TODO: Define value for 'sticky-contact-icons-size' in cabalou theme */
  --sticky-contact-icons-size: inherit;
  /* TODO: Define value for 'transition-duration' in cabalou theme */
  --transition-duration: inherit;
  /* TODO: Define value for 'transition-timing' in cabalou theme */
  --transition-timing: inherit;
}

/* src/styles/themes/muchandy-theme.css */

.muchandy-theme {
  /* Typography */
  --font-family-primary: 'Montserrat', sans-serif;
  --font-family-heading: 'Montserrat', sans-serif;
  --font-family-base: 'Montserrat', sans-serif;

  /* Colors - Brand */
  --color-brand-primary: #ff7f50;
  --color-brand-primary-dark: #cc643f;
  --color-brand-primary-light: #ffa07a;
  --color-brand-secondary: #4aa2d9;
  --color-brand-secondary-dark: #3881b0;
  --color-brand-secondary-light: #7cc0ed;

  /* Component: Typography */
  --typography-color: var(--color-text);
  --typography-muted-color: var(--color-text-light);
  --typography-margin-bottom: var(--space-4);
  --typography-h1-size: var(--font-size-6xl);
  --typography-h2-size: var(--font-size-4xl);
  --typography-h3-size: var(--font-size-3xl);
  --typography-h4-size: var(--font-size-2xl);
  --typography-h5-size: var(--font-size-xl);
  --typography-h6-size: var(--font-size-lg);
  --typography-body-size: var(--font-size-base);
  --typography-small-size: var(--font-size-sm);

  /* Component: Link */
  --link-margin-left: 0;
  --link-margin-right: 0;
  --link-color: var(--color-brand-secondary);
  --link-transition: var(--transition-normal);
  --link-hover-color: var(--color-brand-secondary-light);

  /* Component: Button */
  --button-bg: var(--color-transparent);
  --button-color: var(--color-brand-primary);
  --button-border: 2px solid var(--color-brand-primary);
  --button-radius: 0;
  --button-padding: var(--space-2) var(--space-5);
  --button-font-size: var(--font-size-xl);
  --button-font-family: var(--font-family-primary);
  --button-font-weight: var(--font-weight-medium);
  --button-transition: var(--transition-normal);
  --button-shadow: none;

  /* Hover state */
  --button-hover-bg: var(--color-transparent);
  --button-hover-border-color: var(--color-brand-primary-light);
  --button-hover-color: var(--color-brand-primary-light);
  --button-hover-shadow: none;
  --button-hover-transform: var(--space-1);

  /* Active state */
  --button-active-bg: var(--color-brand-primary-dark);
  --button-active-border-color: var(--color-brand-primary-dark);
  --button-active-shadow: none;
  --button-active-transform: none;

  /* Disabled state */
  --button-disabled-bg: var(--disabled-background);
  --button-disabled-border-color: var(--disabled-background);
  --button-disabled-color: var(--color-text-disabled);
  --button-disabled-opacity: inherit;

  /* Focus state */
  --button-focus-shadow: inherit;

  /* Primary button styles */
  --button-primary-bg: var(--color-brand-primary);
  --button-primary-color: var(--color-text-white);
  --button-primary-active-bg: var(--color-brand-primary-dark);
  --button-primary-hover-bg: var(--color-brand-primary-light);
  --buton-primary-hover-bg: var(--color-brand-primary-light);
  --button-primary-active-border-color: none;
  --button-primary-border-color: none;
  --button-primary-hover-border-color: none;
  --button-primary-hover-color: var(--color-text-white);

  /* Secondary button styles */
  --button-secondary-bg: var(--color-brand-secondary);
  --button-secondary-color: var(--color-text-white);
  --button-secondary-hover-bg: var(--color-brand-secondary-light);
  --button-secondary-active-bg: var(--color-brand-secondary-dark);
  --button-secondary-hover-bg: var(--color-brand-secondary-light);
  --button-secondary-active-border-color: none;
  --button-secondary-border-color: none;
  --button-secondary-hover-border-color: none;
  --button-secondary-hover-color: var(--color-text-white);

  /* Text button styles */
  --button-text-color: var(--color-brand-primary);
  --button-text-hover-color: var(--color-brand-primary-light);
  --button-text-padding: inherit;

  /* Small button styles */
  --button-padding-sm: var(--space-1) var(--space-3);
  --button-font-size-sm: var(--font-size-sm);
  --button-radius-sm: none;

  /* Large button styles */
  --button-padding-lg: var(--space-3) var(--space-5);
  --button-font-size-lg: var(--font-size-lg);
  --button-radius-lg: none;

  /* Icon button styles */
  --button-icon-margin: var(--space-1);
  --button-icon-padding: var(--space-1) var(--space-2);
  --button-icon-radius: 0;
  --button-icon-size: var(--font-size-xl);
  --button-icon-size-lg: var(--font-size-lg);
  --button-icon-size-sm: var(--font-size-sm);

  /* Outlined button styles */
  --button-outlined-color: var(--color-dark);
  --button-outlined-hover-bg: var(--color-transparent);
  --button-outlined-hover-color: var(--color-gray-600);
  --button-outlined-border-color: none;
  --button-outlined-hover-border-color: var(--color-gray-600);

  /* Success button styles */
  --button-success-bg: var(--color-success);
  --button-success-color: var(--color-text-white);
  --button-success-hover-bg: var(--color-success-light);
  --button-success-border-color: none;
  --button-success-hover-border-color: none;
  --button-success-hover-color: var(--color-text-white);

  /* Danger state */
  --button-danger-bg: var(--color-danger);
  --button-danger-color: var(--color-text-white);
  --button-danger-hover-bg: var(--color-danger-light);
  --button-danger-border-color: none;
  --button-danger-hover-border-color: none;
  --button-danger-hover-color: var(--color-text-white);

  /* Component: Navigation */
  --nav-bg: var(--color-bg);
  --nav-border-bottom: 2px solid var(--color-brand-secondary);
  --nav-dropdown-bg: var(--color-bg);
  --nav-padding: var(--space-2);
  --nav-margin-right: var(--space-2);
  --nav-font-size: var(--font-size-xl);
  --nav-line-height: 1.5;
  --nav-active-font-weight: inherit;
  --nav-focus-shadow: var(--focus-ring);
  --nav-item-spacing: var(--space-10);
  --nav-item-spacing-vertical: var(--space-2);
  --nav-submenu-indent: 1;

  /* Navigation link styles */
  --nav-link-color: var(--color-text);
  --nav-link-hover-color: var(--color-brand-secondary);
  --nav-link-active-color: var(--color-brand-secondary);
  --nav-link-font-size: var(--font-size-xl);
  --nav-link-padding: 0;
  --nav-link-radius: 0;
  --nav-link-transition: var(--transition-normal);

  /* Navigation burger styles */
  --nav-burger-font-size: var(--font-size-2xl);
  --nav-burger-color: var(--color-text);
  --nav-burger-size: var(--font-size-2xl);
  --nav-burger-margin-bottom: var(--space-2);

  /* Navigation dropdown styles */
  --nav-dropdown-border: 1px solid var(--color-border-light);
  --nav-dropdown-link-padding: 0;
  --nav-dropdown-padding: 0;
  --nav-dropdown-radius: 0;
  --nav-dropdown-shadow: var(--shadow-md);

  /* Navigation mobile styles */
  --nav-padding-mobile: var(--space-2) 0;
  --nav-mobile-bg: var(--color-bg);
  --nav-mobile-item-border: 1px solid var(--color-border-light);
  --nav-mobile-link-padding: 0;
  --nav-mobile-max-height: inherit;
  --nav-mobile-padding: var(--space-4);
  --nav-mobile-radius: 0;
  --nav-mobile-shadow: none;
  --nav-mobile-submenu-bg: var(--color-bg);
  --nav-mobile-active-bg: var(--color-border-light);
  --nav-mobile-hover-bg: var(--color-border-light);

  /* Component: Section */
  --section-bg: var(--color-bg);
  --section-color: var(--color-text);
  --section-padding: var(--space-4);
  --section-gap: var(--space-3);
  --section-content-max-width: var(--container-max-width);
  --section-padding-tablet: var(--space-3);
  --section-gap-tablet: var(--space-2);
  --section-padding-mobile: var(--space-2);
  --section-bg-minor: var(--color-bg);
  --section-color-minor: var(--color-text-light);

  /* Component: Logo */
  --logo-width: 120px;
  --logo-height: auto;
  --logo-height-tablet: var(--logo-height);
  --logo-hover-opacity: var(--hover-opacity);
  --logo-max-height: var(--logo-height);
  --logo-max-width: var(--logo-width);
  --logo-width-tablet: var(--logo-width);

  /* Component: Card */
  --card-bg: var(--color-bg);
  --card-color: var(--color-text);
  --card-radius: 0;
  --card-border: 1px solid var(--color-border-light);
  --card-border-color: var(--color-border-medium);
  --card-shadow: var(--shadow-md);
  --card-padding: var(--space-6);
  --card-hover-border-color: var(--color-border-medium);
  --card-title-padding: 0 0 var(--space-6) 0;
  --card-title-font-size: var(--font-size-4xl);
  --card-title-font-weight: var(--font-weight-bold);
  --card-title-border: 1px solid var(--color-border-light);
  --card-title-margin-bottom: var(--space-6);
  --card-content-padding: 0;
  --card-footer-margin-top: var(--space-6);
  --card-footer-padding: var(--space-6) 0 0 0;
  --card-footer-bg: var(--color-gray-100);
  --card-footer-border: 1px solid var(--color-border-light);
  --card-footer-font-size: var(--font-size-sm);
  --card-title-padding-mobile: var(--space-3);
  --card-content-padding-mobile: var(--space-3);
  --card-footer-padding-mobile: var(--space-2) var(--space-3);
  --card-image-margin-bottom: var(--space-3);

  /* Component: Input */
  --input-margin-bottom: 0;
  --input-padding: var(--space-2) var(--space-3);
  --input-mobile-padding: var(--space-2);

  --input-font-size: var(--font-size-sm);
  --input-font-family: var(--font-family-primary);
  --input-mobile-font-size: var(--font-size-xs);
  --input-validation-font-size: var(--font-size-xs);

  --input-bg: var(--color-bg);
  --input-color: var(--color-text);
  --input-placeholder-color: var(--color-text-lighter);
  --input-focus-border-color: var(--color-brand-secondary-light);
  --input-disabled-bg: var(--disabled-background);
  --input-readonly-bg: var(--disabled-background);
  --input-valid-border-color: var(--color-success-light);
  --input-invalid-border-color: var(--color-danger-light);
  --input-validation-color: var(--color-danger-light);
  --input-valid-color: var(--color-success-light);

  --input-border: 1px solid var(--color-border-medium);
  --input-radius: 0;
  --input-shadow: var(--shadow-none);
  --input-focus-shadow: var(--focus-ring);
  --input-transition: var(--transition-normal);
  --input-disabled-opacity: var(--disabled-opacity);

  /* Component: Select */
  --select-margin-bottom: 0;
  --select-padding: var(--space-2) var(--space-3);
  --select-font-size: var(--font-size-sm);
  --select-font-family: var(--font-family-base);
  --select-color: var(--color-text);
  --select-placeholder-color: var(--color-text-lighter);
  --select-bg: var(--color-bg);
  --select-border: 1px solid var(--select-border-color);
  --select-border-color: var(--color-border-medium);
  --select-radius: 0;
  --select-shadow: var(--shadow-none);
  --select-transition: var(--transition-normal);
  --select-line-height: 1.5;

  /* Arrow Indicator */
  --select-arrow-size: var(--font-size-sm);
  --select-arrow-margin: var(--space-2);
  --select-arrow-border: 1px solid var(--select-arrow-color);
  --select-arrow-color: var(--color-text);
  --select-arrow-transition: var(--transition-normal);
  --select-arrow-right: var(--space-4);

  /* Dropdown */
  --select-dropdown-bg: var(--color-bg);
  --select-dropdown-border-color: var(--color-border-medium);
  --select-dropdown-radius: 0;
  --select-dropdown-z-index: var(--z-index-dropdown);
  --select-dropdown-transition: var(--transition-normal);
  --select-dropdown-shadow: var(--shadow-none);
  --select-dropdown-max-height: var(--space-40);
  --select-dropdown-mobile-max-height: var(--space-40);

  /* Options */
  --select-option-padding: var(--space-2) var(--space-3);
  --select-option-transition: var(--transition-normal);
  --select-option-hover-bg: var(--color-gray-200);
  --select-option-selected-bg: var(--color-gray-200);
  --select-option-selected-color: var(--color-text);
  --select-option-disabled-color: var(--color-text-disabled);
  --select-option-disabled-bg: var(--color-gray-200);

  /* Group Headers */
  --select-group-header-padding: var(--space-1) var(--space-3);
  --select-group-header-font-weight: bold;
  --select-group-header-color: var(--color-text);
  --select-group-header-bg: var(--color-bg);
  --select-group-header-font-size: var(--font-size-sm);
  --select-group-header-border-bottom: 1px solid var(--color-border-light);
  --select-group-header-border-top: 1px solid var(--color-border-light);

  /* Multiple Selection Checkboxes */
  --select-checkbox-size: var(--font-size-sm);
  --select-checkbox-border: var(--color-border-medium);
  --select-checkbox-radius: 0;
  --select-checkbox-margin: var(--space-2);
  --select-checkbox-check-border: var(--color-brand-secondary-light);

  /* States */
  --select-hover-border-color: var(--color-brand-secondary-light);
  --select-focus-border-color: var(--color-brand-secondary-light);
  --select-focus-shadow: var(--focus-ring);
  --select-disabled-bg: var(--disabled-background);
  --select-disabled-opacity: var(--disabled-opacity);
  --select-valid-border-color: var(--color-success-light);
  --select-invalid-border-color: var(--color-danger-light);

  /* Validation Message */
  --select-validation-font-size: var(--font-size-xs);
  --select-validation-margin-top: var(--space-2);
  --select-validation-color: var(--color-danger-light);
  --select-validation-min-height: var(--space-4);
  --select-valid-color: var(--color-success-light);

  /* Mobile Adjustments */
  --select-mobile-font-size: var(--font-size-xs);
  --select-mobile-padding: var(--space-2);

  /* Component: Checkbox */
  --checkbox-bg: var(--color-bg);
  --checkbox-border: 2px solid var(--color-border-medium);
  --checkbox-radius: 0;
  --checkbox-size: var(--font-size-sm);
  --checkbox-color: var(--color-text);
  --checkbox-indicator-margin: var(--space-2);
  --checkbox-font-size: var(--font-size-sm);
  --checkbox-font-family: var(--font-family-primary);
  --checkbox-transition: var(--transition-normal);
  --checkbox-padding: var(--space-1);
  --checkbox-hover-border-color: var(--color-brand-secondary-light);
  --checkbox-checked-bg: var(--color-brand-secondary);
  --checkbox-checked-border-color: var(--color-brand-secondary);
  --checkbox-focus-shadow: var(--focus-ring);
  --checkbox-disabled-bg: var(--disabled-background);
  --checkbox-disabled-border-color: var(--color-border-light);
  --checkbox-disabled-color: var(--color-text-disabled);
  --checkbox-valid-border-color: var(--color-success-light);
  --checkbox-invalid-border-color: var(--color-danger-light);
  --checkbox-validation-color: var(--color-danger-light);
  --checkbox-validation-font-size: var(--font-size-xs);
  --checkbox-margin-bottom: var(--space-3);
  --checkbox-indicator-width: 4px;
  --checkbox-indicator-height: 8px;
  --checkbox-required-color: var(--color-danger-light);
  --checkbox-indeterminate-bg: var(--color-brand-secondary-light);
  --checkbox-indeterminate-border-color: var(--color-brand-secondary-light);
  --checkbox-indeterminate-width: 8px;
  --checkbox-indeterminate-height: 2px;
  --checkbox-valid-color: var(--color-success-light);

  /* Component: Radio */
  --radio-bg: var(--color-bg);
  --radio-border: 2px solid var(--color-border-medium);
  --radio-size: 20px;
  --radio-inner-size: 10px;
  --radio-color: var(--color-text);
  --radio-indicator-margin: var(--space-2);
  --radio-font-size: var(--font-size-sm);
  --radio-font-family: var(--font-family-primary);
  --radio-transition: var(--transition-normal);
  --radio-padding: var(--space-1);
  --radio-hover-border-color: var(--color-brand-secondary-light);
  --radio-checked-color: var(--color-brand-secondary);
  --radio-checked-border-color: var(--color-brand-secondary);
  --radio-focus-shadow: var(--focus-ring);
  --radio-disabled-bg: var(--disabled-background);
  --radio-disabled-border-color: var(--color-border-light);
  --radio-disabled-color: var(--color-text-disabled);
  --radio-disabled-checked-color: var(--color-text-light);
  --radio-margin-bottom: var(--space-3);
  --radio-required-color: var(--color-danger-light);

  /* Component: Radio Group */
  --radio-group-margin-bottom: var(--space-4);
  --radio-group-padding: var(--space-3);
  --radio-group-border: 1px solid var(--color-border-light);
  --radio-group-radius: 0;
  --radio-group-legend-font-size: var(--font-size-sm);
  --radio-group-legend-color: var(--color-text);
  --radio-group-font-family: var(--font-family-primary);
  --radio-group-legend-font-weight: var(--font-weight-medium);
  --radio-group-legend-padding: 0 var(--space-2);
  --radio-group-legend-margin-bottom: var(--space-2);
  --radio-group-required-color: var(--color-danger-light);
  --radio-group-gap: var(--space-2);
  --radio-group-valid-border-color: var(--color-success-light);
  --radio-group-invalid-border-color: var(--color-danger-light);
  --radio-group-validation-color: var(--color-danger-light);
  --radio-group-validation-font-size: var(--font-size-xs);
  --radio-group-disabled-opacity: var(--disabled-opacity);
  --radio-group-disabled-bg: var(--color-gray-100);

  /* Component: Form Group */
  --form-group-margin-bottom: 0;
  --form-group-label-font-size: var(--font-size-sm);
  --form-group-label-color: var(--color-text);
  --form-group-font-family: var(--font-family-base);
  --form-group-label-font-weight: var(--font-weight-medium);
  --form-group-label-margin-bottom: 0;
  --form-group-required-color: var(--color-danger-light);
  --form-group-help-font-size: var(--font-size-xs);
  --form-group-help-color: var(--color-text-light);
  --form-group-label-margin-right: var(--space-3);
  --form-group-label-margin-left: var(--space-3);
  --form-group-label-width: 30%;

  /* Component: Form */
  --form-label-width: 30%;
  --form-section-margin-bottom: var(--space-6);
  --form-section-title-font-size: var(--font-size-xl);
  --form-section-title-color: var(--color-text);
  --form-section-title-font-weight: var(--font-weight-semibold);
  --form-section-title-margin-bottom: var(--space-3);
  --form-section-title-border: 1px solid var(---border-color-light);
  --form-section-description-font-size: var(--font-size-sm);
  --form-section-description-color: var(--color-text-light);
  --form-section-description-margin-bottom: var(--space-3);
  --form-actions-gap: var(--space-2);
  --form-actions-margin-top: 0;
  --form-actions-justify: flex-end;

  /* Component: PriceDisplay */
  --price-display-bg: var(--color-bg-transparent);
  --price-display-border: none;
  --price-display-color: var(--color-brand-primary);
}

.muchandy-theme {
  --header-bg: inherit;
  /* TODO: Define value for 'header-bg-scrolled' in muchandy theme */
  --header-bg-scrolled: inherit;
  /* TODO: Define value for 'header-branding-gap' in muchandy theme */
  --header-branding-gap: inherit;
  /* TODO: Define value for 'header-color' in muchandy theme */
  --header-color: inherit;
  /* TODO: Define value for 'header-height' in muchandy theme */
  --header-height: inherit;
  /* TODO: Define value for 'header-height-mobile' in muchandy theme */
  --header-height-mobile: inherit;
  /* TODO: Define value for 'header-max-width' in muchandy theme */
  --header-max-width: inherit;
  /* TODO: Define value for 'header-padding' in muchandy theme */
  --header-padding: inherit;
  /* TODO: Define value for 'header-padding-mobile' in muchandy theme */
  --header-padding-mobile: inherit;
  /* TODO: Define value for 'header-shadow' in muchandy theme */
  --header-shadow: inherit;
  /* TODO: Define value for 'header-shadow-scrolled' in muchandy theme */
  --header-shadow-scrolled: inherit;
  /* TODO: Define value for 'header-title-size' in muchandy theme */
  --header-title-size: inherit;
  /* TODO: Define value for 'header-title-size-mobile' in muchandy theme */
  --header-title-size-mobile: inherit;
  /* TODO: Define value for 'header-title-weight' in muchandy theme */
  --header-title-weight: inherit;
  /* TODO: Define value for 'header-transition' in muchandy theme */
  --header-transition: inherit;
  /* TODO: Define value for 'header-transparent-color' in muchandy theme */
  --header-transparent-color: inherit;
  /* TODO: Define value for 'header-z-index' in muchandy theme */
  --header-z-index: inherit;

  /* TODO: Define value for 'collapsible-header-collapsed-height' in muchandy theme */
  --collapsible-header-collapsed-height: inherit;
  /* TODO: Define value for 'collapsible-header-contact-bg' in muchandy theme */
  --collapsible-header-contact-bg: inherit;
  /* TODO: Define value for 'collapsible-header-contact-transition' in muchandy theme */
  --collapsible-header-contact-transition: inherit;
  /* TODO: Define value for 'collapsible-header-height' in muchandy theme */
  --collapsible-header-height: inherit;
  /* TODO: Define value for 'collapsible-header-logo-transition' in muchandy theme */
  --collapsible-header-logo-transition: inherit;
  /* TODO: Define value for 'collapsible-header-mobile-height' in muchandy theme */
  --collapsible-header-mobile-height: inherit;
  /* TODO: Define value for 'collapsible-header-shadow' in muchandy theme */
  --collapsible-header-shadow: inherit;
  /* TODO: Define value for 'collapsible-header-transition' in muchandy theme */
  --collapsible-header-transition: inherit;
  /* TODO: Define value for 'color-bg-secondary' in muchandy theme */
  --color-bg-secondary: inherit;
  /* TODO: Define value for 'color-border' in muchandy theme */
  --color-border: inherit;
  /* TODO: Define value for 'color-gray-50' in muchandy theme */
  --color-gray-50: inherit;
  /* TODO: Define value for 'contact-info-color' in muchandy theme */
  --contact-info-color: inherit;
  /* TODO: Define value for 'contact-info-font-size' in muchandy theme */
  --contact-info-font-size: inherit;
  /* TODO: Define value for 'contact-info-gap' in muchandy theme */
  --contact-info-gap: inherit;
  /* TODO: Define value for 'contact-info-hover-color' in muchandy theme */
  --contact-info-hover-color: inherit;
  /* TODO: Define value for 'contact-info-icon-size' in muchandy theme */
  --contact-info-icon-size: inherit;
  /* TODO: Define value for 'contact-info-item-gap' in muchandy theme */
  --contact-info-item-gap: inherit;
  /* TODO: Define value for 'contact-info-mobile-gap' in muchandy theme */
  --contact-info-mobile-gap: inherit;
  /* TODO: Define value for 'font-family-mono' in muchandy theme */
  --font-family-mono: inherit;
  /* TODO: Define value for 'footer-bg' in muchandy theme */
  --footer-bg: inherit;
  /* TODO: Define value for 'footer-link-hover' in muchandy theme */
  --footer-link-hover: inherit;
  /* TODO: Define value for 'footer-text' in muchandy theme */
  --footer-text: inherit;
  /* TODO: Define value for 'sticky-contact-icons-bg' in muchandy theme */
  --sticky-contact-icons-bg: inherit;
  /* TODO: Define value for 'sticky-contact-icons-color' in muchandy theme */
  --sticky-contact-icons-color: inherit;
  /* TODO: Define value for 'sticky-contact-icons-gap' in muchandy theme */
  --sticky-contact-icons-gap: inherit;
  /* TODO: Define value for 'sticky-contact-icons-hover-color' in muchandy theme */
  --sticky-contact-icons-hover-color: inherit;
  /* TODO: Define value for 'sticky-contact-icons-icon-size' in muchandy theme */
  --sticky-contact-icons-icon-size: inherit;
  /* TODO: Define value for 'sticky-contact-icons-mobile-bottom' in muchandy theme */
  --sticky-contact-icons-mobile-bottom: inherit;
  /* TODO: Define value for 'sticky-contact-icons-mobile-icon-size' in muchandy theme */
  --sticky-contact-icons-mobile-icon-size: inherit;
  /* TODO: Define value for 'sticky-contact-icons-mobile-right' in muchandy theme */
  --sticky-contact-icons-mobile-right: inherit;
  /* TODO: Define value for 'sticky-contact-icons-mobile-size' in muchandy theme */
  --sticky-contact-icons-mobile-size: inherit;
  /* TODO: Define value for 'sticky-contact-icons-padding' in muchandy theme */
  --sticky-contact-icons-padding: inherit;
  /* TODO: Define value for 'sticky-contact-icons-right' in muchandy theme */
  --sticky-contact-icons-right: inherit;
  /* TODO: Define value for 'sticky-contact-icons-shadow' in muchandy theme */
  --sticky-contact-icons-shadow: inherit;
  /* TODO: Define value for 'sticky-contact-icons-size' in muchandy theme */
  --sticky-contact-icons-size: inherit;
  /* TODO: Define value for 'transition-duration' in muchandy theme */
  --transition-duration: inherit;
  /* TODO: Define value for 'transition-timing' in muchandy theme */
  --transition-timing: inherit;
}

/* .storybook/index.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  color: #333;
  line-height: 1.5;
}

/* General app styles */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.header-container {
  flex: 0 0 auto;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.content-container {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.25;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 18px;
}

button {
  cursor: pointer;
}

/* Focus outline for accessibility */
*:focus-visible {
  outline: 2px solid #1ea7fd;
  outline-offset: 2px;
}

/* .storybook/components/Sidebar/Sidebar.css */
.sidebar {
  width: 260px;
  background-color: #f8f9fa;
  border-right: 1px solid #e6e6e6;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav {
  width: 100%;
  padding-bottom: 24px;
}

/* Category styling */
.sidebar-category {
  margin-bottom: 16px;
}

.sidebar-category__title {
  padding: 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6c757d;
  background-color: #f1f3f5;
  letter-spacing: 0.5px;
  margin: 0;
  border-bottom: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
}

.component-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.component-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Different styling for prototype components */
.component-item[data-category='prototypes'] {
  background-color: rgba(0, 98, 204, 0.03);
}

.component-header {
  padding: 12px 16px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  color: #333;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.component-header:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.component-header::after {
  content: '▼';
  font-size: 8px;
  transition: transform 0.2s ease;
  opacity: 0.5;
  margin-left: 8px;
}

.component-item.expanded .component-header {
  font-weight: 600;
  color: #1ea7fd;
}

.component-item.expanded .component-header::after {
  transform: rotate(180deg);
  opacity: 0.8;
}

/* Different color for prototype component headers */
.component-item[data-category='prototypes'] .component-header {
  color: #0062cc;
}

.component-item[data-category='prototypes'].expanded .component-header {
  background-color: rgba(0, 98, 204, 0.05);
}

.stories-list {
  list-style: none;
  padding: 4px 0;
  margin: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.component-item.expanded .stories-list {
  display: block;
}

.story-item {
  width: 100%;
}

.story-link {
  display: block;
  padding: 8px 16px 8px 32px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.story-link:hover {
  background-color: rgba(0, 0, 0, 0.03);
  color: #333;
}

.story-link.active {
  background-color: rgba(30, 167, 253, 0.1);
  color: #1ea7fd;
  border-left: 3px solid #1ea7fd;
  padding-left: 29px; /* Adjust for the border */
  font-weight: 500;
}

/* Prototype story styling */
.story-link[data-category='prototypes'] {
  color: #495057;
}

.story-link[data-category='prototypes']:hover {
  color: #0062cc;
}

.story-link[data-category='prototypes'].active {
  background-color: rgba(0, 98, 204, 0.1);
  color: #0062cc;
  border-left: 3px solid #0062cc;
}

/* .storybook/components/Stage/Stage.css */
.stage {
  flex: 1;
  background-color: #f8f9fa;
  padding: 20px;
  overflow: auto;
  position: relative;
}

.stage__inner {
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-height: 200px;
  padding: 20px;
  position: relative;
}

.stage__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: #6c757d;
  text-align: center;
  padding: 20px;
}

.stage__empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.stage__empty-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.stage__empty-message {
  font-size: 14px;
  max-width: 400px;
  line-height: 1.5;
}

/* .storybook/components/HeaderToolbar/HeaderToolbar.css */
.header-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #e6e6e6;
  height: 60px;
}

.header-toolbar__branding {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo {
  height: 32px;
  width: auto;
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0;
  user-select: none;
}

.header-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.theme-selector {
  height: 32px;
  min-width: 120px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  color: #333;
  transition: all 0.2s ease;
}

.theme-selector:hover {
  border-color: #b3b3b3;
}

.theme-selector:focus {
  border-color: #1ea7fd;
  outline: none;
}


/*# sourceMappingURL=main.1fa0189c1ebd575e12bf.css.map*/