/* ==================================================
   INDUSTRIAL AIR — Design Tokens (CSS Custom Properties)
   Adapted from Stitch visual design donor.
   ================================================== */

/* ---- Core brand palette (from Stitch, preserved) ---- */
:root {
  /* Deep navy — primary brand background (used selectively) */
  --ia-navy-900: #0B2545;
  --ia-navy-800: #0d1b2c;
  --ia-navy-700: #1a293d;

  /* Royal blue — primary action color */
  --ia-royal: #0066FF;
  --ia-royal-light: #b3c5ff;

  /* Cyan — secondary accent */
  --ia-cyan: #00D2FF;
  --ia-cyan-light: #b6ebff;

  /* Turquoise — tertiary accent */
  --ia-turquoise: #00E5BE;
  --ia-turquoise-light: #42fdd5;

  /* Green — accent / status */
  --ia-green: #10B981;

  /* Light premium surfaces — architectural white/light grey layering */
  --ia-surface-0: #f8fafc;         /* pure white — main background */
  --ia-surface-50: #f1f5f9;        /* off-white — section backgrounds */
  --ia-surface-100: #e2e8f0;       /* light grey — surface-container-lowest */
  --ia-surface-200: #cbd5e1;       /* mid grey — surface-container-low */
  --ia-surface-300: #94a3b8;       /* darker grey — surface-container */
  --ia-surface-400: #64748b;       /* dark grey — surface-container-high */
  --ia-surface-500: #475569;       /* darkest grey — surface-container-highest */

  /* Premium dark surfaces (for select sections/contrast) */
  --ia-dark-surface-0: #0B2545;     /* deep navy — hero/accent backgrounds */
  --ia-dark-surface-100: #0d141b;  /* dark navy — card backgrounds */
  --ia-dark-surface-200: #151c24;  /* lighter navy — elevated surfaces */

  /* Text colors — premium dark with brand accents */
  --ia-on-surface: #1e293b;         /* primary text — dark slate */
  --ia-on-surface-dim: #334155;     /* body text — medium slate */
  --ia-on-surface-variant: #64748b; /* secondary text — grey */
  --ia-on-surface-light: #94a3b8;  /* light text for dark backgrounds */

  /* Outline / border treatment */
  --ia-outline: #cbd5e1;           /* borders — light grey */
  --ia-outline-variant: #e2e8f0;   /* subtle borders — very light */
  --ia-outline-dark: #334155;       /* dark borders for light backgrounds */

  /* Border / line treatment (premium transparency) */
  --ia-line: rgba(203, 213, 225, 0.6);
  --ia-line-strong: rgba(203, 213, 225, 0.9);
  --ia-line-dark: rgba(51, 65, 85, 0.15);

  /* Temperature transition palette */
  --ia-temp-hot: #ff6b4a;          /* 34°C — warm inlet */
  --ia-temp-cold: #00D2FF;         /* 22°C — cool outlet */

  /* Gradients — premium airflow aesthetics */
  --ia-gradient-primary: linear-gradient(90deg, #0066FF 0%, #00D2FF 50%, #00E5BE 85%, #10B981 100%);
  --ia-gradient-primary-vertical: linear-gradient(180deg, #0066FF 0%, #00D2FF 50%, #00E5BE 85%, #10B981 100%);
  --ia-gradient-surface-card: linear-gradient(160deg, rgba(0,210,255,0.03), rgba(255,255,255,0) 55%);
  --ia-gradient-radial-hero: radial-gradient(circle at 50% 44%, rgba(0,229,190,0.12), transparent 48%);
  --ia-gradient-signal-sweep: linear-gradient(90deg, transparent, rgba(0,210,255,0.06), rgba(16,185,129,0.08), transparent 58%);
  --ia-gradient-progress: linear-gradient(90deg, var(--ia-cyan), var(--ia-turquoise));
  --ia-gradient-data-flow: linear-gradient(90deg, var(--ia-royal), var(--ia-cyan), var(--ia-turquoise), var(--ia-green));
  --ia-gradient-temp-flow: linear-gradient(90deg, #ff6b4a, #0066FF, #00D2FF, #00E5BE);

  /* Premium subtle gradients */
  --ia-gradient-subtle: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,250,252,0.8));
  --ia-gradient-airflow: linear-gradient(90deg, rgba(0,102,255,0.05), rgba(0,210,255,0.08), rgba(0,229,190,0.05));

  /* Signature airflow gradients — for editorial hero and transitions */
  --ia-airflow-hero: linear-gradient(135deg, rgba(0,102,255,0.12) 0%, rgba(0,210,255,0.15) 50%, rgba(0,229,190,0.12) 100%);
  --ia-airflow-flow: linear-gradient(90deg, #0066FF 0%, #00D2FF 33%, #00E5BE 66%, #10B981 100%);
  --ia-airflow-subtle: linear-gradient(135deg, rgba(0,102,255,0.03) 0%, rgba(0,210,255,0.05) 50%, rgba(0,229,190,0.03) 100%);
  --ia-airflow-curve: linear-gradient(110deg, rgba(0,102,255,0.08) 0%, rgba(0,210,255,0.12) 50%, rgba(0,229,190,0.08) 100%);

  /* Smooth easing from Stitch */
  --ia-ease: cubic-bezier(0.76, 0, 0.24, 1);

  /* ---- Typography scale (adapted from Stitch Tailwind config) ---- */
  /* Space Grotesk — Hero, headlines, display typography */
  --font-display: "Space Grotesk", sans-serif;
  --font-display-heavy: 700;
  --font-display-bold: 600;
  --font-display-medium: 500;

  /* Inter — Navigation, body copy, forms, general UI */
  --font-body: "Inter", sans-serif;
  --font-body-regular: 400;
  --font-body-medium: 500;
  --font-body-semibold: 600;

  /* JetBrains Mono — Technical data only */
  --font-mono: "JetBrains Mono", monospace;
  --font-mono-medium: 500;

  /* Responsive typography (fluid clamp from Stitch) */
  --text-display-hero: clamp(2.25rem, 6.5vw, 4rem);
  --text-display-hero-mobile: clamp(1.75rem, 10vw, 2.75rem);
  --text-headline-xl: clamp(1.75rem, 4vw, 2.5rem);
  --text-headline-xl-mobile: clamp(1.5rem, 5vw, 2rem);
  --text-headline-lg: clamp(1.5rem, 3vw, 2.25rem);
  --text-headline-md: clamp(1.25rem, 2.5vw, 1.75rem);
  --text-headline-sm: clamp(1.125rem, 2.2vw, 1.4rem);
  --text-body-lg: 1.125rem;
  --text-body-md: 1rem;
  --text-body-sm: 0.875rem;
  --text-label-caps: 0.625rem;
  --text-spec-code: 0.8125rem;
  --text-metric-display: clamp(1.5rem, 2vw, 2rem);

  /* ---- Spacing system (8px base unit from Stitch) ---- */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2.5rem;     /* 40px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */

  --gutter: 1.5rem;       /* 24px */
  --gutter-mobile: 0.75rem;/* 12px */
  --margin-desktop: 4rem; /* 64px */
  --margin-mobile: 1rem;  /* 16px */
  --container-max: 1440px;

  /* ---- Layout breakpoints (from Stitch) ---- */
  --bp-tablet: 768px;
  --bp-mobile: 760px;

  /* ---- Focus ring treatment ---- */
  --focus-ring: 2px solid var(--ia-cyan);
  --focus-ring-offset: 2px;

  /* ---- Material 3 color role aliases (for utility class compatibility) ---- */
  --on-surface: var(--ia-on-surface);
  --on-surface-dim: var(--ia-on-surface-dim);
  --on-surface-variant: var(--ia-on-surface-variant);
  --secondary-container: var(--ia-royal);
  --tertiary: var(--ia-turquoise);
  --tertiary-fixed: var(--ia-cyan);
  --on-tertiary: var(--ia-navy-900);
  --on-primary: var(--ia-navy-900);
  --surface: var(--color-surface);
  --surface-low: var(--color-surface-low);
  --surface-high: var(--color-surface-high);
  --surface-lowest: var(--ia-surface-100);
  --outline: var(--ia-line);
  --outline-variant: var(--ia-outline-variant);
  --temp-hot: var(--ia-temp-hot);
  --royal-blue: var(--ia-royal);
  --cyan: var(--ia-cyan);
  
  /* Premium light theme aliases */
  --color-surface: var(--ia-surface-0);
  --color-surface-low: var(--ia-surface-50);
  --color-surface-high: var(--ia-surface-100);
  --color-surface-highest: var(--ia-surface-200);
}

/* Light premium theme — surface variables */
:root {
  --color-background: var(--ia-surface-0);
  --color-surface: var(--ia-surface-50);
  --color-surface-low: var(--ia-surface-100);
  --color-surface-high: var(--ia-surface-200);
  --color-surface-highest: var(--ia-surface-300);
  --color-on-primary: #1e293b;
  --color-on-tertiary: #0B2545;
}

/* ---- Reduced motion respect (from Stitch) ---- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Scroll behavior ---- */
html {
  scroll-behavior: smooth;
}