/* Theme System CSS - Generated from theme JSON files */

/* Theme: Default Light */
[data-theme="default"] {
  /* Theme Background & Text */
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  color: #111827;

  /* Colors - Brand */
  --color-primary: #EC4899;
  --color-primary-dark: #DB2777;
  --color-primary-light: #F472B6;
  --color-secondary: #3B82F6;
  --color-secondary-dark: #2563EB;
  --color-secondary-light: #60A5FA;
  --color-tertiary: #9D6FFF;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4446;
  --color-bg-dark: #FFFFFF;
  --color-bg-light: #F8FAFC;
  --color-bg-start: #FFFFFF;
  --color-bg-end: #F8FAFC;
  --color-card-bg: #FFFFFF;
  --color-bg-overlay: #0A0518;
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-text-secondary-light: #CBD5E1;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-accent-1: #FF9966;
  --color-accent-2: #4169E1;
  --color-accent-3: #9D6FFF;
  --color-accent-brand: #3E84FF;
  --color-accent-emphasis: #A78BFA;
  --color-icon-1: #4990E2;
  --color-icon-2: #FF5A5A;
  --color-icon-3: #FFCA42;
  --color-icon-4: #FF6B9E;
  --color-gradient-start: #ffffff;

  /* Derived Colors */
  --gradient-primary: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
  --gradient-button: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-primary) 100%);
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-danger-bg: rgba(239, 68, 70, 0.1);

  /* Typography - Families */
  --font-display: 'Clash Display', sans-serif;
  --font-body: 'Satoshi', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typography - Base */
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Typography - Scale */
  --text-h1: 3.5rem;
  --text-h1-mobile: 2.25rem;
  --weight-h1: 600;
  --leading-h1: 1.05;
  --tracking-h1: -0.02em;
  --text-h2: 2.25rem;
  --text-h2-mobile: 1.75rem;
  --weight-h2: 600;
  --leading-h2: 1.15;
  --tracking-h2: -0.01em;
  --text-h3: 1.5rem;
  --text-h3-mobile: 1.25rem;
  --weight-h3: 600;
  --leading-h3: 1.3;
  --text-body: 1rem;
  --leading-body: 1.7;
  --text-small: 0.875rem;
  --text-eyebrow: 0.6875rem;
  --weight-eyebrow: 500;
  --tracking-eyebrow: 0.1em;

  /* Spacing */
  --spacing-section: 6rem;
  --spacing-section-mobile: 3rem;
  --spacing-block: 3rem;
  --spacing-element: 1.5rem;
  --spacing-tight: 0.75rem;
  --spacing-unit: 1rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Effects */
  --transition-speed: 0.3s;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --blur-amount: 10px;
  --backdrop-blur: blur(var(--blur-amount));
}

/* Theme: Dark Slate */
[data-theme="dark"] {
  /* Theme Background & Text */
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #F1F5F9;

  /* Colors - Brand */
  --color-primary: #EC4899;
  --color-primary-dark: #DB2777;
  --color-primary-light: #F472B6;
  --color-secondary: #3B82F6;
  --color-secondary-dark: #2563EB;
  --color-secondary-light: #60A5FA;
  --color-tertiary: #9D6FFF;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-bg-dark: #0F172A;
  --color-bg-light: #1E293B;
  --color-bg-start: #0F172A;
  --color-bg-end: #1E293B;
  --color-card-bg: #1E293B;
  --color-bg-overlay: #0A0518;
  --color-text-primary: #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
  --color-text-secondary-light: #CBD5E1;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-accent-1: #FF9D3E;
  --color-accent-2: #4169E1;
  --color-accent-3: #9063CD;
  --color-accent-primary: #9063CD;
  --color-accent-brand: #3E84FF;
  --color-accent-emphasis: #A78BFA;
  --color-icon-1: #4990E2;
  --color-icon-2: #FF5A5A;
  --color-icon-3: #FFCA42;
  --color-icon-4: #FF6B9E;
  --color-gradient-start: #6A47FF;
  --color-white-5: rgba(255, 255, 255, 0.05);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-drawer-bg: #030508;
  --color-accent-primary-light: #D8B4FE;

  /* Derived Colors */
  --gradient-primary: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
  --gradient-button: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-primary) 100%);
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-danger-bg: rgba(239, 68, 68, 0.1);

  /* Typography - Families */
  --font-display: 'Clash Display', sans-serif;
  --font-body: 'Satoshi', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typography - Base */
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Typography - Scale */
  --text-h1: 3.5rem;
  --text-h1-mobile: 2.25rem;
  --weight-h1: 600;
  --leading-h1: 1.05;
  --tracking-h1: -0.02em;
  --text-h2: 2.25rem;
  --text-h2-mobile: 1.75rem;
  --weight-h2: 600;
  --leading-h2: 1.15;
  --tracking-h2: -0.01em;
  --text-h3: 1.5rem;
  --text-h3-mobile: 1.25rem;
  --weight-h3: 600;
  --leading-h3: 1.3;
  --text-body: 1rem;
  --leading-body: 1.7;
  --text-small: 0.875rem;
  --text-eyebrow: 0.6875rem;
  --weight-eyebrow: 500;
  --tracking-eyebrow: 0.1em;

  /* Spacing */
  --spacing-section: 6rem;
  --spacing-section-mobile: 3rem;
  --spacing-block: 3rem;
  --spacing-element: 1.5rem;
  --spacing-tight: 0.75rem;
  --spacing-unit: 1rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Effects */
  --transition-speed: 0.3s;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --blur-amount: 10px;
  --backdrop-blur: blur(var(--blur-amount));
}

/* Theme: Light Muted */
[data-theme="light"] {
  /* Theme Background & Text */
  background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
  color: #111827;

  /* Colors - Brand */
  --color-primary: #EC4899;
  --color-primary-dark: #DB2777;
  --color-primary-light: #F472B6;
  --color-secondary: #3B82F6;
  --color-secondary-dark: #2563EB;
  --color-secondary-light: #60A5FA;
  --color-tertiary: #9D6FFF;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-bg-dark: #FAFAFA;
  --color-bg-light: #F5F5F5;
  --color-bg-start: #FAFAFA;
  --color-bg-end: #F5F5F5;
  --color-card-bg: #FFFFFF;
  --color-bg-overlay: #0A0518;
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-text-secondary-light: #CBD5E1;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-accent-1: #FF9D3E;
  --color-accent-2: #4169E1;
  --color-accent-3: #9063CD;
  --color-accent-primary: #9063CD;
  --color-accent-brand: #3E84FF;
  --color-accent-emphasis: #A78BFA;
  --color-icon-1: #4990E2;
  --color-icon-2: #FF5A5A;
  --color-icon-3: #FFCA42;
  --color-icon-4: #FF6B9E;
  --color-gradient-start: #6A47FF;
  --color-white-5: rgba(0, 0, 0, 0.05);
  --color-white-10: rgba(0, 0, 0, 0.1);
  --color-white-15: rgba(0, 0, 0, 0.15);
  --color-white-20: rgba(0, 0, 0, 0.2);
  --color-white-50: rgba(0, 0, 0, 0.5);
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-drawer-bg: #FFFFFF;
  --color-accent-primary-light: #DDD6FE;

  /* Derived Colors */
  --gradient-primary: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
  --gradient-button: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-primary) 100%);
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-danger-bg: rgba(239, 68, 68, 0.1);

  /* Typography - Families */
  --font-display: 'Clash Display', sans-serif;
  --font-body: 'Satoshi', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typography - Base */
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Typography - Scale */
  --text-h1: 3.5rem;
  --text-h1-mobile: 2.25rem;
  --weight-h1: 600;
  --leading-h1: 1.05;
  --tracking-h1: -0.02em;
  --text-h2: 2.25rem;
  --text-h2-mobile: 1.75rem;
  --weight-h2: 600;
  --leading-h2: 1.15;
  --tracking-h2: -0.01em;
  --text-h3: 1.5rem;
  --text-h3-mobile: 1.25rem;
  --weight-h3: 600;
  --leading-h3: 1.3;
  --text-body: 1rem;
  --leading-body: 1.7;
  --text-small: 0.875rem;
  --text-eyebrow: 0.6875rem;
  --weight-eyebrow: 500;
  --tracking-eyebrow: 0.1em;

  /* Spacing */
  --spacing-section: 6rem;
  --spacing-section-mobile: 3rem;
  --spacing-block: 3rem;
  --spacing-element: 1.5rem;
  --spacing-tight: 0.75rem;
  --spacing-unit: 1rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Effects */
  --transition-speed: 0.3s;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --blur-amount: 10px;
  --backdrop-blur: blur(var(--blur-amount));
}

/* Theme: Midnight Plum */
[data-theme="plum"] {
  /* Theme Background & Text */
  background: linear-gradient(135deg, #1A1520 0%, #251D2B 100%);
  color: #F1F5F9;

  /* Colors - Brand */
  --color-primary: #EC4899;
  --color-primary-dark: #DB2777;
  --color-primary-light: #F472B6;
  --color-secondary: #3B82F6;
  --color-secondary-dark: #2563EB;
  --color-secondary-light: #60A5FA;
  --color-tertiary: #9D6FFF;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-bg-dark: #1A1520;
  --color-bg-light: #251D2B;
  --color-bg-start: #1A1520;
  --color-bg-end: #251D2B;
  --color-card-bg: #251D2B;
  --color-bg-overlay: #0A0518;
  --color-text-primary: #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
  --color-text-secondary-light: #CBD5E1;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-accent-1: #FF9D3E;
  --color-accent-2: #4169E1;
  --color-accent-3: #9063CD;
  --color-accent-primary: #9063CD;
  --color-accent-brand: #3E84FF;
  --color-accent-emphasis: #A78BFA;
  --color-icon-1: #4990E2;
  --color-icon-2: #FF5A5A;
  --color-icon-3: #FFCA42;
  --color-icon-4: #FF6B9E;
  --color-gradient-start: #6A47FF;
  --color-white-5: rgba(255, 255, 255, 0.05);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-drawer-bg: #0A0518;
  --color-accent-primary-light: #D8B4FE;

  /* Derived Colors */
  --gradient-primary: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
  --gradient-button: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-primary) 100%);
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-danger-bg: rgba(239, 68, 68, 0.1);

  /* Typography - Families */
  --font-display: 'Clash Display', sans-serif;
  --font-body: 'Satoshi', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typography - Base */
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Typography - Scale */
  --text-h1: 3.5rem;
  --text-h1-mobile: 2.25rem;
  --weight-h1: 600;
  --leading-h1: 1.05;
  --tracking-h1: -0.02em;
  --text-h2: 2.25rem;
  --text-h2-mobile: 1.75rem;
  --weight-h2: 600;
  --leading-h2: 1.15;
  --tracking-h2: -0.01em;
  --text-h3: 1.5rem;
  --text-h3-mobile: 1.25rem;
  --weight-h3: 600;
  --leading-h3: 1.3;
  --text-body: 1rem;
  --leading-body: 1.7;
  --text-small: 0.875rem;
  --text-eyebrow: 0.6875rem;
  --weight-eyebrow: 500;
  --tracking-eyebrow: 0.1em;

  /* Spacing */
  --spacing-section: 6rem;
  --spacing-section-mobile: 3rem;
  --spacing-block: 3rem;
  --spacing-element: 1.5rem;
  --spacing-tight: 0.75rem;
  --spacing-unit: 1rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Effects */
  --transition-speed: 0.3s;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --blur-amount: 10px;
  --backdrop-blur: blur(var(--blur-amount));
}

/* Theme: Gradient Dark */
[data-theme="gradient-dark"] {
  /* Theme Background & Text */
  background: linear-gradient(135deg, #0C0627 0%, #2B1356 100%);
  color: #FFFFFF;

  /* Colors - Brand */
  --color-primary: #6D28D9;
  --color-primary-dark: #5B21B6;
  --color-primary-light: #9B87F5;
  --color-secondary: #3B82F6;
  --color-secondary-dark: #2563EB;
  --color-secondary-light: #60A5FA;
  --color-tertiary: #9D6FFF;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-bg-dark: #0A101D;
  --color-bg-light: #0F1729;
  --color-bg-start: #0C0627;
  --color-bg-end: #2B1356;
  --color-card-bg: #131B2F;
  --color-bg-overlay: #0A0518;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #D7C5FF;
  --color-text-muted: #94A3B8;
  --color-text-secondary-light: rgba(215, 197, 255, 0.7);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-accent-1: #FF5A5A;
  --color-accent-2: #4169E1;
  --color-accent-3: #9063CD;
  --color-accent-primary: #9063CD;
  --color-accent-brand: #3E84FF;
  --color-accent-emphasis: #A78BFA;
  --color-icon-1: #4990E2;
  --color-icon-2: #FF5A5A;
  --color-icon-3: #FFCA42;
  --color-icon-4: #FF6B9E;
  --color-gradient-start: #6A47FF;
  --color-white-5: rgba(255, 255, 255, 0.05);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-drawer-bg: #131B2F;
  --color-accent-primary-light: #DDD6FE;

  /* Derived Colors */
  --gradient-primary: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
  --gradient-button: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-primary) 100%);
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-danger-bg: rgba(239, 68, 68, 0.1);

  /* Typography - Families */
  --font-display: 'Clash Display', sans-serif;
  --font-body: 'Satoshi', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typography - Base */
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Typography - Scale */
  --text-h1: 3.5rem;
  --text-h1-mobile: 2.25rem;
  --weight-h1: 600;
  --leading-h1: 1.05;
  --tracking-h1: -0.02em;
  --text-h2: 2.25rem;
  --text-h2-mobile: 1.75rem;
  --weight-h2: 600;
  --leading-h2: 1.15;
  --tracking-h2: -0.01em;
  --text-h3: 1.5rem;
  --text-h3-mobile: 1.25rem;
  --weight-h3: 600;
  --leading-h3: 1.3;
  --text-body: 1rem;
  --leading-body: 1.7;
  --text-small: 0.875rem;
  --text-eyebrow: 0.6875rem;
  --weight-eyebrow: 500;
  --tracking-eyebrow: 0.1em;

  /* Spacing */
  --spacing-section: 6rem;
  --spacing-section-mobile: 3rem;
  --spacing-block: 3rem;
  --spacing-element: 1.5rem;
  --spacing-tight: 0.75rem;
  --spacing-unit: 1rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Effects */
  --transition-speed: 0.3s;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --blur-amount: 10px;
  --backdrop-blur: blur(var(--blur-amount));
}

/* Mobile Typography Overrides */
@media (max-width: 1023px) {
  [data-theme="default"],
  [data-theme="dark"],
  [data-theme="light"],
  [data-theme="plum"],
  [data-theme="gradient-dark"] {
    --text-h1: var(--text-h1-mobile, 2.25rem);
    --text-h2: var(--text-h2-mobile, 1.75rem);
    --text-h3: var(--text-h3-mobile, 1.25rem);
    --spacing-section: var(--spacing-section-mobile, 3rem);
  }
}