/* ============================================
   IAGENCE FLUX v2 — DESIGN TOKENS (CSS)
   Awwwards-Level • Industrial Flow
   ============================================
   Usage: Import this file first in your CSS.
   All components reference these variables.
   Never hardcode colors, spacing, or fonts.
   ============================================ */

:root {
  /* ==========================================
     COLOR — ORANGE SCALE (Action & Energie)
     ========================================== */
  --orange-50: #FFF4ED;
  --orange-100: #FFE4D1;
  --orange-200: #FFC9A3;
  --orange-300: #FFA366;
  --orange-400: #FF7D33;
  --orange-500: #FF5C00;   /* PRIMARY BRAND COLOR */
  --orange-600: #CC4A00;
  --orange-700: #993700;
  --orange-800: #662500;

  /* ==========================================
     COLOR — NAVY SCALE (Profondeur & Technique)
     ========================================== */
  --navy-50: #F0F4F8;
  --navy-100: #D9E2EC;
  --navy-200: #BCCCDC;
  --navy-300: #9FB3C8;
  --navy-400: #627D98;
  --navy-500: #486581;
  --navy-600: #334E68;
  --navy-700: #243B53;
  --navy-800: #1A2B42;   /* SECONDARY BRAND COLOR */
  --navy-900: #0F1B2D;

  /* ==========================================
     COLOR — NEUTRAL SCALE
     ========================================== */
  --neutral-0: #FFFFFF;
  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  /* ==========================================
     COLOR — SEMANTIC
     ========================================== */
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;

  /* ==========================================
     COLOR — GLOW EFFECTS
     ========================================== */
  --orange-glow: rgba(255, 92, 0, 0.35);
  --navy-glow: rgba(26, 43, 66, 0.3);

  /* ==========================================
     COLOR — GRADIENTS (Brand DNA)
     ========================================== */
  --gradient-brand: linear-gradient(135deg, #FF5C00 0%, #CC4A00 40%, #334E68 70%, #1A2B42 100%);
  --gradient-brand-subtle: linear-gradient(135deg, rgba(255, 92, 0, 0.08) 0%, rgba(26, 43, 66, 0.08) 100%);
  --gradient-brand-dark: linear-gradient(135deg, #FF5C00 0%, #0F1B2D 100%);
  --gradient-brand-text: linear-gradient(135deg, #FF5C00, #FFA366);

  /* ==========================================
     TYPOGRAPHY — FONT FAMILIES
     ========================================== */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ==========================================
     TYPOGRAPHY — TYPE SCALE (9 levels)
     Base: 16px | Ratio: 1.250 (Major Third)
     ========================================== */
  --text-display-xl: 96px;
  --text-display-lg: 56px;
  --text-display-md: 40px;
  --text-heading-lg: 32px;
  --text-heading-md: 24px;
  --text-body-lg: 20px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-body-xs: 12px;

  --lh-display-xl: 0.85;
  --lh-display-lg: 0.9;
  --lh-display-md: 0.95;
  --lh-heading-lg: 1.1;
  --lh-heading-md: 1.2;
  --lh-body-lg: 1.6;
  --lh-body-md: 1.625;
  --lh-body-sm: 1.5;
  --lh-body-xs: 1.4;

  --fw-display-xl: 800;
  --fw-display-lg: 700;
  --fw-display-md: 700;
  --fw-heading-lg: 600;
  --fw-heading-md: 600;
  --fw-body-lg: 400;
  --fw-body-md: 400;
  --fw-body-sm: 400;
  --fw-body-xs: 500;

  --ls-display-xl: -0.05em;
  --ls-display-lg: -0.04em;
  --ls-display-md: -0.03em;
  --ls-heading-lg: -0.02em;
  --ls-heading-md: -0.02em;
  --ls-body-lg: 0;
  --ls-body-md: 0;
  --ls-body-sm: 0;
  --ls-body-xs: 0.08em;

  /* ==========================================
     SPACING — 8px Grid System
     ========================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 80px;
  --space-16: 96px;
  --space-20: 128px;

  /* ==========================================
     LAYOUT
     ========================================== */
  --container-max: 1200px;
  --container-padding-mobile: 24px;
  --container-padding-tablet: 32px;
  --container-padding-desktop: 48px;
  --grid-columns: 12;
  --grid-gutter: 24px;

  /* ==========================================
     BREAKPOINTS
     ========================================== */
  --bp-xs: 0px;
  --bp-sm: 480px;
  --bp-md: 640px;
  --bp-lg: 900px;
  --bp-xl: 1200px;
  --bp-2xl: 1440px;

  /* ==========================================
     MOTION — EASING CURVES
     ========================================== */
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================
     MOTION — DURATIONS
     ========================================== */
  --duration-micro: 150ms;
  --duration-standard: 250ms;
  --duration-emphasis: 400ms;
  --duration-entry: 600ms;

  /* ==========================================
     SHADOWS
     ========================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 15px 35px -8px rgba(0, 0, 0, 0.08), 0 5px 15px -5px rgba(0, 0, 0, 0.04);
  --shadow-orange: 0 4px 20px rgba(255, 92, 0, 0.25);

  /* ==========================================
     BORDER RADIUS
     ========================================== */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ==========================================
     DARK MODE OVERRIDES
     Apply with: @media (prefers-color-scheme: dark)
     or class-based: .dark { ... }
     ========================================== */
}

/* ==========================================
   DARK MODE — Class-based activation
   Usage: <html class="dark">
   ========================================== */
.dark {
  --bg-primary: var(--navy-900);
  --bg-card: var(--navy-800);
  --bg-alternate: var(--navy-800);
  --text-primary: var(--neutral-100);
  --text-secondary: var(--navy-300);
  --text-muted: var(--navy-400);
  --border-color: rgba(255, 255, 255, 0.06);
  --border-color-hover: rgba(255, 255, 255, 0.12);
}

/* ==========================================
   REDUCED MOTION — Accessibility
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 0.01ms;
    --duration-standard: 0.01ms;
    --duration-emphasis: 0.01ms;
    --duration-entry: 0.01ms;
  }
}