/* ═══════════════════════════════════════════════════════
   IKO3D — Design System
   Palette : Blanc dominant · Bleu #483EF0 · Typographie forte
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Couleurs principales ── */
  --color-primary:        #483EF0;
  --color-primary-dark:   #3730C4;
  --color-primary-light:  #6C63FF;
  --color-primary-bg:     #F0EFFF;

  /* ── Surfaces ── */
  --color-bg:             #FFFFFF;
  --color-bg-subtle:      #F8F9FC;
  --color-bg-elevated:    #F1F3F9;
  --color-bg-overlay:     rgba(255,255,255,0.85);

  /* ── Texte ── */
  --color-text:           #0F1523;
  --color-text-muted:     #64748B;
  --color-text-light:     #94A3B8;
  --color-text-inverse:   #FFFFFF;

  /* ── Bordures ── */
  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E1;

  /* ── États ── */
  --color-success:        #10B981;
  --color-success-bg:     #ECFDF5;
  --color-warning:        #F59E0B;
  --color-warning-bg:     #FFFBEB;
  --color-danger:         #EF4444;
  --color-danger-bg:      #FEF2F2;

  /* ── Gradients ── */
  --gradient-hero:        linear-gradient(135deg, #483EF0 0%, #7C3AED 50%, #2563EB 100%);
  --gradient-primary:     linear-gradient(135deg, #483EF0, #6C63FF);
  --gradient-subtle:      linear-gradient(180deg, #F0EFFF 0%, #FFFFFF 100%);

  /* ── Typographie ── */
  --font-sans:            'Outfit', system-ui, sans-serif;
  --font-mono:            'JetBrains Mono', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;

  /* ── Espacement ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Rayons ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Ombres ── */
  --shadow-sm:  0 1px 3px rgba(15,21,35,0.06), 0 1px 2px rgba(15,21,35,0.04);
  --shadow-md:  0 4px 12px rgba(15,21,35,0.08), 0 2px 4px rgba(15,21,35,0.04);
  --shadow-lg:  0 12px 32px rgba(15,21,35,0.10), 0 4px 8px rgba(15,21,35,0.06);
  --shadow-xl:  0 24px 48px rgba(15,21,35,0.12), 0 8px 16px rgba(15,21,35,0.06);
  --shadow-blue: 0 8px 24px rgba(72,62,240,0.25);

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --container-max:  1200px;
  --container-pad:  var(--space-6);
  --header-height:  72px;
}