/**
 * Iroise 2026 — Design Tokens
 *
 * Toutes les variables de design centralisées ici.
 * Modifier une valeur ici se répercute partout dans le site.
 *
 * Palette : monochrome bleu strict, AUCUNE autre couleur autorisée.
 * Hiérarchie visuelle : bleu foncé (autorité), cyan (action), gris (profondeur).
 */

:root {

  /* ============================================
     COULEURS
     ============================================ */

  /* Marque Iroise (échantillonnés sur le logo IAF, 2026-04-25) */
  --color-iroise-blue:      #0050A8;  /* corps "Iroise" + base avion */
  --color-iroise-cyan:      #68B0E8;  /* aile avion */
  --color-iroise-blue-soft: #E8F1F8;  /* fond tinté pour sections */

  /* Surfaces */
  --color-bg:     #FFFFFF;
  --color-bg-alt: #FAFAFA;

  /* Texte */
  --color-text:         #0A0A0A;
  --color-text-muted:   #4A5563;
  --color-text-inverse: #FFFFFF;

  /* Échelle de gris froide */
  --color-gray-50:  #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;

  /* Bordures */
  --color-border:        var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);

  /* États (toujours dans la palette bleu/cyan) */
  --color-action:       var(--color-iroise-blue);
  --color-action-hover: #003B7D;  /* iroise-blue assombri ~10 %, hover bouton primaire */
  --color-focus:        var(--color-iroise-cyan);  /* contour focus, fond clair → reste perceptible */


  /* ============================================
     TYPOGRAPHIE
     ============================================ */

  --font-display: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Échelle modulaire (base 1rem = 16px, ratio ~1.25) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  4rem;
  --fs-5xl:  5.5rem;

  /* Hauteurs de ligne */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* Graisses */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;


  /* ============================================
     ESPACEMENTS
     ============================================ */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --section-padding-y: clamp(3rem, 8vw, 6rem);
  --section-padding-x: clamp(1rem, 4vw, 2rem);


  /* ============================================
     LAYOUT
     ============================================ */

  --container-narrow: 880px;
  --container:        1200px;
  --container-wide:   1440px;

  --header-height:        80px;
  --header-height-mobile: 64px;


  /* ============================================
     BORDURES & RAYONS
     ============================================ */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  --border-width: 1px;


  /* ============================================
     OMBRES
     ============================================ */

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.16);


  /* ============================================
     TRANSITIONS
     ============================================ */

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);


  /* ============================================
     Z-INDEX
     ============================================ */

  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   1500;
}


@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}