/* ================================================
   DeepFluid UG - Design System Variables
   Apple-inspired minimalist design tokens
   ================================================ */

:root {
  /* ========== Color Palette ========== */

  /* Base Colors */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F5F5F7;
  --color-bg-tertiary: #E8E8ED;

  /* Text Colors */
  --color-text-primary: #1D1D1F;
  --color-text-secondary: #6E6E73;
  --color-text-tertiary: #86868B;
  --color-text-inverse: #FFFFFF;

  /* Brand Colors */
  --color-accent-blue: #0071E3;      /* Primary CTA */
  --color-accent-cyan: #00A3E0;      /* OpenFOAMGPT - CFD */
  --color-accent-purple: #6B5CE7;    /* FeaGPT - FEA */
  --color-accent-orange: #FF9500;    /* TurbulenceAI - Research */
  --color-accent-green: #30D158;     /* Success/Trust */

  /* Functional Colors */
  --color-success: #30D158;
  --color-warning: #FF9500;
  --color-error: #FF3B30;
  --color-border: #D2D2D7;
  --color-divider: #E8E8ED;

  /* Overlay/Shadow */
  --color-overlay: rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16);

  /* ========== Typography ========== */

  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace;

  /* Font Sizes */
  --font-size-hero: clamp(48px, 8vw, 72px);
  --font-size-h1: clamp(40px, 6vw, 56px);
  --font-size-h2: clamp(32px, 4vw, 48px);
  --font-size-h3: clamp(24px, 3vw, 32px);
  --font-size-h4: 24px;
  --font-size-body-lg: 19px;
  --font-size-body: 17px;
  --font-size-body-sm: 15px;
  --font-size-caption: 13px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ========== Spacing System ========== */

  /* 8px base unit system */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* Section Padding */
  --section-padding-y: clamp(60px, 10vw, 120px);
  --section-padding-x: clamp(20px, 5vw, 40px);

  /* ========== Layout ========== */

  /* Container */
  --container-max-width: 1200px;
  --container-wide-max-width: 1400px;
  --container-narrow-max-width: 800px;

  /* Grid */
  --grid-gap: var(--space-lg);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ========== Animation ========== */

  /* Durations */
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Easing Functions */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========== Z-Index Layers ========== */

  --z-base: 0;
  --z-content: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-navigation: 2000;
  --z-tooltip: 3000;

  /* ========== Breakpoints (for reference in JS) ========== */

  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1440px;
}

/* ========== Dark Mode (OpenAI/Anthropic-inspired) ========== */

[data-theme="dark"] {
  /* Base Colors */
  --color-bg-primary: #0A0A0A;
  --color-bg-secondary: #1A1A1A;
  --color-bg-tertiary: #2A2A2A;

  /* Text Colors */
  --color-text-primary: #F5F5F7;
  --color-text-secondary: #A0A0A5;
  --color-text-tertiary: #70707599;
  --color-text-inverse: #0A0A0A;

  /* Brand Colors - Adjusted for dark backgrounds */
  --color-accent-blue: #0A84FF;      /* Brighter blue for visibility */
  --color-accent-cyan: #32ADE6;      /* Brighter cyan */
  --color-accent-purple: #8E7CE7;    /* Brighter purple */
  --color-accent-orange: #FFA940;    /* Brighter orange */

  /* Functional Colors */
  --color-border: #3A3A3A;
  --color-divider: #2A2A2A;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(255, 255, 255, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* Auto dark mode (respects system preference) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Same as dark theme */
    --color-bg-primary: #0A0A0A;
    --color-bg-secondary: #1A1A1A;
    --color-bg-tertiary: #2A2A2A;

    --color-text-primary: #F5F5F7;
    --color-text-secondary: #A0A0A5;
    --color-text-tertiary: #707075;
    --color-text-inverse: #0A0A0A;

    --color-accent-blue: #0A84FF;
    --color-accent-cyan: #32ADE6;
    --color-accent-purple: #8E7CE7;
    --color-accent-orange: #FFA940;

    --color-border: #3A3A3A;
    --color-divider: #2A2A2A;
  }
}