:root {
    /* Core Brand Color - Everything derives from these HSL values */
    --primary-h: 351;  /* Hue */
    --primary-s: 96%;  /* Saturation */
    --primary-l: 64%;  /* Lightness */
    
    /* Calculated lightness values - calc() works at this level */
    --primary-l-light: calc(var(--primary-l) + 8%);
    --primary-l-dark: calc(var(--primary-l) - 20%);
    --primary-l-accent: calc(var(--primary-l) - 25%);
    
    /* Brand Colors - All derived from calculated HSL values */
    --color-primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --color-primary-light: hsl(var(--primary-h), var(--primary-s), var(--primary-l-light));
    --color-primary-dark: hsl(var(--primary-h), var(--primary-s), var(--primary-l-dark));
    --color-accent: hsl(var(--primary-h), var(--primary-s), var(--primary-l-accent));
    
    /* Alpha variants for all semantic colors using HSL */
    --color-primary-alpha-05: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.05);
    --color-primary-alpha-10: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
    --color-primary-alpha-15: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.15);
    --color-primary-alpha-20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
    --color-primary-alpha-30: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.3);
    
    /* Secondary color alpha variants */
    --color-secondary-alpha-05: hsla(213, 93%, 68%, 0.05);
    --color-secondary-alpha-10: hsla(213, 93%, 68%, 0.1);
    --color-secondary-alpha-15: hsla(213, 93%, 68%, 0.15);
    --color-secondary-alpha-20: hsla(213, 93%, 68%, 0.2);
    --color-secondary-alpha-30: hsla(213, 93%, 68%, 0.3);
    
    /* Status color alpha variants */
    --color-success-alpha-03: hsla(142, 71%, 45%, 0.03);
    --color-success-alpha-05: hsla(142, 71%, 45%, 0.05);
    --color-success-alpha-10: hsla(142, 71%, 45%, 0.1);
    --color-success-alpha-15: hsla(142, 71%, 45%, 0.15);
    --color-success-alpha-20: hsla(142, 71%, 45%, 0.2);
    
    --color-error-alpha-05: hsla(0, 84%, 60%, 0.05);
    --color-error-alpha-08: hsla(0, 84%, 60%, 0.08);
    --color-error-alpha-10: hsla(0, 84%, 60%, 0.1);
    --color-error-alpha-15: hsla(0, 84%, 60%, 0.15);
    --color-error-alpha-20: hsla(0, 84%, 60%, 0.2);
    
    --color-danger-alpha-05: hsla(0, 84%, 60%, 0.05);
    --color-danger-alpha-10: hsla(0, 84%, 60%, 0.1);
    --color-danger-alpha-15: hsla(0, 84%, 60%, 0.15);
    --color-danger-alpha-20: hsla(0, 84%, 60%, 0.2);
    
    --color-warning-alpha-05: hsla(38, 92%, 50%, 0.05);
    --color-warning-alpha-10: hsla(38, 92%, 50%, 0.1);
    --color-warning-alpha-15: hsla(38, 92%, 50%, 0.15);
    --color-warning-alpha-20: hsla(38, 92%, 50%, 0.2);
    
    /* Text color alpha variants */
    --color-text-primary-alpha-60: hsla(210, 20%, 98%, 0.6);
    --color-text-primary-alpha-70: hsla(210, 20%, 98%, 0.7);
    --color-text-primary-alpha-80: hsla(210, 20%, 98%, 0.8);
    --color-text-primary-alpha-90: hsla(210, 20%, 98%, 0.9);
    --color-text-primary-alpha-95: hsla(210, 20%, 98%, 0.95);
    
    /* Universal alpha variants for black and white */
    --black-alpha-04: hsla(0, 0%, 0%, 0.04);
    --black-alpha-05: hsla(0, 0%, 0%, 0.05);
    --black-alpha-06: hsla(0, 0%, 0%, 0.06);
    --black-alpha-10: hsla(0, 0%, 0%, 0.1);
    --black-alpha-15: hsla(0, 0%, 0%, 0.15);
    --black-alpha-20: hsla(0, 0%, 0%, 0.2);
    --black-alpha-25: hsla(0, 0%, 0%, 0.25);
    --black-alpha-30: hsla(0, 0%, 0%, 0.3);
    --black-alpha-40: hsla(0, 0%, 0%, 0.4);
    --black-alpha-50: hsla(0, 0%, 0%, 0.5);
    --black-alpha-70: hsla(0, 0%, 0%, 0.7);
    --black-alpha-90: hsla(0, 0%, 0%, 0.9);
    
    --white-alpha-05: hsla(0, 0%, 100%, 0.05);
    --white-alpha-10: hsla(0, 0%, 100%, 0.1);
    --white-alpha-15: hsla(0, 0%, 100%, 0.15);
    --white-alpha-20: hsla(0, 0%, 100%, 0.2);
    --white-alpha-60: hsla(0, 0%, 100%, 0.6);
    --white-alpha-70: hsla(0, 0%, 100%, 0.7);
    --white-alpha-80: hsla(0, 0%, 100%, 0.8);
    --white-alpha-90: hsla(0, 0%, 100%, 0.9);
    --white-alpha-95: hsla(0, 0%, 100%, 0.95);

    /* Additional alpha variants for specific use cases */
    --color-primary-alpha-06: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.06);
    --color-primary-alpha-08: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.08);
    --color-bg-primary-alpha-85: hsla(220, 26%, 14%, 0.85);
    --color-bg-primary-alpha-90: hsla(220, 26%, 14%, 0.9);
    --color-text-tertiary-alpha-02: hsla(210, 11%, 71%, 0.02);
    --color-text-tertiary-alpha-10: hsla(210, 11%, 71%, 0.1);
    --color-text-tertiary-alpha-20: hsla(210, 11%, 71%, 0.2);
    --color-text-tertiary-alpha-70: hsla(210, 11%, 71%, 0.7);
    --color-text-tertiary-alpha-80: hsla(210, 11%, 71%, 0.8);
    
    /* Z-index system */
    --z-tooltip: 1070;
    --color-secondary: #60a5fa;
    --color-secondary-dark: #3b82f6;
    
    /* Font performance optimizations */
    font-display: swap;

    
    /* Social Media Brand Colors */
    --color-twitter: #1DA1F2;
    --color-facebook: #1877F2;
    --color-linkedin: #0A66C2;
    --color-email: var(--color-primary); /* Email uses brand color */
    
    /* Status Colors */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-danger: #ef4444;  /* Alias for error */
    --color-info: #60a5fa;
    
    /* Disabled/Neutral Colors */
    --color-disabled: #6b7280;
    --color-neutral-dark: #374151;
    --color-neutral-light: #9ca3af;
    
    
    /* Background colors */
    --color-bg-primary: #111827;
    --color-bg-secondary: #1F2937;
    --color-bg-tertiary: #374151;
    
    /* Text colors */
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #E5E7EB;
    --color-text-tertiary: #9CA3AF;
    
    /* UI Elements */
    --color-border: var(--white-alpha-10);
    
    /* 3D Model Color System - All derived from brand colors */
    --color-model-primary: var(--color-primary);           /* Main model parts - brand color */
    --color-model-secondary: var(--color-accent);          /* Secondary parts - accent color */
    --color-model-tertiary: var(--color-secondary);        /* Tertiary parts - secondary color */
    --color-model-edges: var(--color-primary);             /* Edge lines - brand color */
    --color-model-highlight: var(--color-primary-light);   /* Highlights - light brand */
    --color-model-shadow: var(--color-primary-dark);       /* Shadows - dark brand */
    
    /* Grid and scene colors - use direct HSL values for Three.js compatibility */
    --color-grid-major: hsl(var(--primary-h), var(--primary-s), var(--primary-l-light));                /* Major grid lines - computed accent */
    --color-grid-minor: var(--color-bg-tertiary);          /* Minor grid lines - theme */
    --color-scene-background: var(--color-bg-primary);     /* Scene background - theme */
    --color-scene-text: var(--color-bg-secondary);         /* Scene text - theme */
    
    /* Model text color uses theme text */
    --color-model-text: var(--color-text-primary);
    
    /* Model state colors remain semantic */
    --color-model-error: var(--color-error);
    --color-model-warning: var(--color-warning);
    --color-model-success: var(--color-success);
    --color-model-disabled: var(--color-disabled);
    
    /* Transparency values for model materials */
    --model-opacity-normal: 1.0;        /* Normal opacity */
    --model-opacity-transparent: 0.6;   /* Semi-transparent */
    --model-opacity-ghost: 0.3;         /* Very transparent */
    
    /* Animations */
    --transition-fast: 150ms;
    --transition-normal: 250ms;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Spacing system */
    --space-xxs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    
    /* Button and form element system */
    --button-min-height: 32px;
    --input-min-height: 32px;
    
    /* Touch device overrides - 44px minimum for better accessibility */
    --button-min-height-touch: 44px;
    --input-min-height-touch: 44px;
    
    /* Typography scale */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 var(--black-alpha-05);
    --shadow-md: 0 4px 6px -1px var(--black-alpha-10), 0 2px 4px -1px var(--black-alpha-06);
    --shadow-lg: 0 10px 15px -3px var(--black-alpha-10), 0 4px 6px -2px var(--black-alpha-05);
    --shadow-xl: 0 20px 25px -5px var(--black-alpha-10), 0 10px 10px -5px var(--black-alpha-04);
    
    /* Additional shadows for specific use cases */
    --shadow-button: 0 1px 2px var(--black-alpha-10);
    --shadow-button-active: 0 2px 4px var(--black-alpha-15);
    --shadow-dropdown: 0 2px 8px var(--black-alpha-50);
    --shadow-modal: 0 4px 12px var(--black-alpha-30);
    --shadow-tooltip: 0 2px 4px var(--black-alpha-30);
    --shadow-metaball: 0 8px 24px var(--black-alpha-40);
    
    /* Typography */
    --font-primary: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'Space Mono', monospace;
    
    /* Font Feature Settings */
    --font-features-headings: "ss04" on;
    --font-features-body: "ss01" on;
}

/* Font Faces from src/app.css */
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk/SpaceGrotesk[wght].woff2') format('woff2');
    font-weight: 100 700; /* Supports weights from 100 to 700 */
    font-style: normal;
    font-display: swap;
}

/* Space Mono - Regular */
@font-face {
    font-family: 'Space Mono';
    src: url('/fonts/space-mono/SpaceMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Space Mono - Italic */
@font-face {
    font-family: 'Space Mono';
    src: url('/fonts/space-mono/SpaceMono-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Space Mono - Bold */
@font-face {
    font-family: 'Space Mono';
    src: url('/fonts/space-mono/SpaceMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Space Mono - Bold Italic */
@font-face {
    font-family: 'Space Mono';
    src: url('/fonts/space-mono/SpaceMono-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Base body styles */
body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    line-height: 1.5;
    font-weight: 400;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    font-feature-settings: var(--font-features-body);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-feature-settings: var(--font-features-headings);
}

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Global form element styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
select,
textarea {
    min-height: var(--input-min-height);
}

/* Specific exclusions for certain input types */
input[type="color"],
input[type="range"],
input[type="checkbox"],
input[type="radio"] {
    min-height: auto;
}

/* Touch device support - larger touch targets for accessibility */
@media (hover: none) and (pointer: coarse) {
    :root {
        --button-min-height: var(--button-min-height-touch);
        --input-min-height: var(--input-min-height-touch);
    }
}

/* Gradient text helpers (simplified) */
.gradient-text-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-bg-primary);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes slideInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Utility animation classes */
.animate-fade-in, .fade-in {
    animation: fadeIn var(--transition-normal) var(--easing-standard) both;
}

.animate-scale-in, .scale-in {
    animation: scaleIn var(--transition-normal) var(--easing-standard) both;
}

.animate-slide-up, .slide-up {
    animation: slideInUp var(--transition-normal) var(--easing-standard) both;
}

.animate-pulse {
    animation: pulse 2s infinite var(--easing-standard);
} 

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body {
    min-height: 100vh;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "ss03", "ss04"; /* Enable stylistic alternates */
}

/* Light Theme Variables */
.theme-light {
    /* Background colors */
    --color-bg-primary: #f8fafc;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #e2e8f0;
    --color-card: var(--white-alpha-80);
    --color-card-hover: var(--white-alpha-90);
    
    /* Text colors */
    --color-text-primary: #1e293b;
    --color-text-secondary: #475569;
    --color-text-tertiary: #64748b;
    
    /* UI Elements */
    --color-border: var(--black-alpha-10);
    --color-shadow: var(--black-alpha-10);
    --color-shadow-intense: var(--black-alpha-20);
    
    /* 3D Model colors for light theme - managed by ColorSystem JavaScript */
    /* Note: These are updated dynamically and don't need explicit overrides */
    
    /* Grid colors for light theme */
    --color-grid-major: hsla(var(--primary-h), var(--primary-s), 70%, 0.12) !important; /* Very muted brand color */
    --color-grid-minor: hsla(215, 10%, 75%, 0.08) !important; /* Very light subtle gray */
    
    /* Background alpha variants for light theme */
    --color-bg-primary-alpha-80: hsla(215, 25%, 97%, 0.8);
    --color-bg-primary-alpha-85: hsla(215, 25%, 97%, 0.85);
    --color-bg-primary-alpha-90: hsla(215, 25%, 97%, 0.9);
    --color-bg-primary-alpha-95: hsla(215, 25%, 97%, 0.95);
    --color-bg-secondary-alpha-80: hsla(0, 0%, 100%, 0.8);
    
    /* Build plate colors for light theme */
    --color-build-plate: #d1d5db;        /* Light gray for build surface */
    --color-build-volume: #6366f1;       /* Indigo for volume outline */
    
    /* Shadows adjusted for light theme */
    --shadow-sm: 0 1px 2px 0 var(--black-alpha-05);
    --shadow-md: 0 4px 6px -1px var(--black-alpha-10), 0 2px 4px -1px var(--black-alpha-06);
    --shadow-lg: 0 10px 15px -3px var(--black-alpha-10), 0 4px 6px -2px var(--black-alpha-05);
    --shadow-xl: 0 20px 25px -5px var(--black-alpha-10), 0 10px 10px -5px var(--black-alpha-04);
}

/* Dark Theme Variables (explicit class for consistency) */
.theme-dark {
    /* Background colors */
    --color-bg-primary: #111827;
    --color-bg-secondary: #1F2937;
    --color-bg-tertiary: #374151;
    --color-card: var(--black-alpha-20);
    --color-card-hover: var(--black-alpha-30);
    
    /* Text colors */
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #E5E7EB;
    --color-text-tertiary: #9CA3AF;
    
    /* UI Elements */
    --color-border: var(--white-alpha-10);
    --color-shadow: var(--black-alpha-20);
    --color-shadow-intense: var(--black-alpha-40);
    
    /* 3D Model colors for dark theme - managed by ColorSystem JavaScript */
    /* Note: These are updated dynamically and don't need explicit overrides */
    
    /* Grid colors for dark theme */
    --color-grid-major: hsla(var(--primary-h), var(--primary-s), 30%, 0.12) !important; /* Very muted brand color */
    --color-grid-minor: hsla(215, 8%, 35%, 0.08) !important; /* Very dark subtle gray */
    
    /* Background alpha variants for dark theme */
    --color-bg-primary-alpha-80: hsla(220, 26%, 14%, 0.8);
    --color-bg-primary-alpha-85: hsla(220, 26%, 14%, 0.85);
    --color-bg-primary-alpha-90: hsla(220, 26%, 14%, 0.9);
    --color-bg-primary-alpha-95: hsla(220, 26%, 14%, 0.95);
    --color-bg-secondary-alpha-80: hsla(217, 19%, 20%, 0.8);
    
    /* Build plate colors for dark theme */
    --color-build-plate: #4b5563;        /* Medium gray for build surface */
    --color-build-volume: var(--color-primary);  /* Brand color for volume outline */
    
    /* Shadows for dark theme */
    --shadow-sm: 0 1px 2px 0 var(--black-alpha-25);
    --shadow-md: 0 4px 6px -1px var(--black-alpha-30), 0 2px 4px -1px var(--black-alpha-20);
    --shadow-lg: 0 10px 15px -3px var(--black-alpha-30), 0 4px 6px -2px var(--black-alpha-20);
    --shadow-xl: 0 20px 25px -5px var(--black-alpha-30), 0 10px 10px -5px var(--black-alpha-20);
}