/**
 * ================================================================
 * FROGGY NETWORK — DESIGN TOKENS
 * Charte Graphique Officielle — Version Web/Digital
 * ================================================================
 * Source: Charte Graphique CMJN Froggy Network
 * Usage : inclure EN PREMIER dans tout projet web Froggy Network
 *
 * <link rel="stylesheet" href="css/froggy-tokens.css">
 * ================================================================
 */

:root {

  /* ============================================================
     COULEURS PRIMAIRES OFFICIELLES
     Source: Charte CMJN Froggy Network
     ============================================================ */
  --fn-navy:          #242a46;   /* CMJN(100, 90, 42, 44) — R36 V42 B70  */
  --fn-teal:          #009895;   /* CMJN(100,  0, 48,  0) — R0 V152 B149 */

  /* Dérivées navy */
  --fn-navy-dark:     #1a1f33;   /* hover, dark mode surface            */
  --fn-navy-light:    #3a4066;   /* bordures sur fond navy               */
  --fn-navy-alpha10:  rgba(36, 42, 70, 0.10);
  --fn-navy-alpha20:  rgba(36, 42, 70, 0.20);
  --fn-navy-alpha50:  rgba(36, 42, 70, 0.50);

  /* Dérivées teal */
  --fn-teal-dark:     #007a78;   /* hover, emphasis                      */
  --fn-teal-mid:      #00b5b2;   /* variante lumineuse                   */
  --fn-teal-light:    #e0f5f5;   /* surfaces secondaires claires         */
  --fn-teal-alpha10:  rgba(0, 152, 149, 0.10);
  --fn-teal-alpha20:  rgba(0, 152, 149, 0.20);

  /* ============================================================
     TEXTE
     ============================================================ */
  --fn-body:          #1a1a2e;   /* texte principal                      */
  --fn-gray:          #6c757d;   /* texte secondaire                     */
  --fn-gray-light:    #adb5bd;   /* texte désactivé, placeholders        */
  --fn-white:         #ffffff;
  --fn-off-white:     #f8f9fa;   /* surfaces très légères                */
  --fn-border:        #dee2e6;   /* bordures légères                     */

  /* ============================================================
     COULEURS SÉMANTIQUES
     ============================================================ */
  --fn-critique:      #c0392b;   /* Critique / erreur                    */
  --fn-eleve:         #d35400;   /* Élevé / avertissement fort           */
  --fn-moyen:         #d4ac0d;   /* Moyen / attention                    */
  --fn-ok:            #1e8449;   /* OK / succès / nominal                */
  --fn-info:          #009895;   /* Info (alias teal)                    */

  /* ============================================================
     SURFACES (light mode)
     ============================================================ */
  --fn-surface-bg:      #ffffff;
  --fn-surface-card:    #ffffff;
  --fn-surface-subtle:  #f8f9fa;
  --fn-surface-border:  #dee2e6;
  --fn-text-primary:    #1a1a2e;
  --fn-text-secondary:  #6c757d;

  /* ============================================================
     TYPOGRAPHIE OFFICIELLE
     ============================================================ */
  /* Polices officielles charte (fichiers fournis dans fonts/) */
  --fn-font-spinc:    'SpinCycle', sans-serif;        /* Logotype / display         */
  --fn-font-segoe:    'SegoePrint', sans-serif;       /* Taglines / sous-titres     */
  --fn-font-noto:     'NotoMono', monospace;          /* Code / données techniques  */

  /* Polices web complément (DM Sans via Google Fonts) */
  --fn-font-display:  'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --fn-font-body:     'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --fn-font-mono:     'NotoMono', 'DM Mono', 'Consolas', monospace;

  /* ============================================================
     ÉCHELLE TYPOGRAPHIQUE
     ============================================================ */
  --fn-text-xs:       0.75rem;    /*  12px */
  --fn-text-sm:       0.875rem;   /*  14px */
  --fn-text-base:     1rem;       /*  16px */
  --fn-text-md:       1.125rem;   /*  18px */
  --fn-text-lg:       1.25rem;    /*  20px */
  --fn-text-xl:       1.5rem;     /*  24px */
  --fn-text-2xl:      2rem;       /*  32px */
  --fn-text-3xl:      2.75rem;    /*  44px */
  --fn-text-hero:     3.5rem;     /*  56px */

  /* Poids typographiques */
  --fn-weight-regular: 400;
  --fn-weight-medium:  500;
  --fn-weight-semibold:600;
  --fn-weight-bold:    700;
  --fn-weight-black:   800;

  /* Hauteurs de ligne */
  --fn-leading-tight:  1.2;
  --fn-leading-snug:   1.4;
  --fn-leading-normal: 1.65;
  --fn-leading-loose:  1.8;

  /* ============================================================
     ESPACEMENT
     ============================================================ */
  --fn-space-1:       0.25rem;    /*  4px */
  --fn-space-2:       0.5rem;     /*  8px */
  --fn-space-3:       0.75rem;    /* 12px */
  --fn-space-4:       1rem;       /* 16px */
  --fn-space-5:       1.25rem;    /* 20px */
  --fn-space-6:       1.5rem;     /* 24px */
  --fn-space-8:       2rem;       /* 32px */
  --fn-space-10:      2.5rem;     /* 40px */
  --fn-space-12:      3rem;       /* 48px */
  --fn-space-16:      4rem;       /* 64px */
  --fn-space-20:      5rem;       /* 80px */

  /* Aliases sémantiques */
  --fn-space-xs:      var(--fn-space-1);
  --fn-space-sm:      var(--fn-space-2);
  --fn-space-md:      var(--fn-space-4);
  --fn-space-lg:      var(--fn-space-6);
  --fn-space-xl:      var(--fn-space-8);
  --fn-space-2xl:     var(--fn-space-12);
  --fn-space-3xl:     var(--fn-space-20);

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --fn-radius-sm:     4px;
  --fn-radius-md:     8px;
  --fn-radius-lg:     12px;
  --fn-radius-xl:     20px;
  --fn-radius-2xl:    28px;
  --fn-radius-full:   9999px;

  /* ============================================================
     OMBRES
     ============================================================ */
  --fn-shadow-xs:   0 1px 2px rgba(36, 42, 70, 0.06);
  --fn-shadow-sm:   0 1px 3px rgba(36, 42, 70, 0.08),
                    0 1px 2px rgba(36, 42, 70, 0.04);
  --fn-shadow-md:   0 4px 16px rgba(36, 42, 70, 0.12),
                    0 2px 4px  rgba(36, 42, 70, 0.06);
  --fn-shadow-lg:   0 8px 32px rgba(36, 42, 70, 0.16),
                    0 4px 8px  rgba(36, 42, 70, 0.08);
  --fn-shadow-xl:   0 20px 60px rgba(36, 42, 70, 0.20);
  --fn-shadow-teal: 0 4px 16px rgba(0, 152, 149, 0.25);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --fn-transition-fast:   all 0.15s ease;
  --fn-transition-base:   all 0.20s ease;
  --fn-transition-slow:   all 0.35s ease;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --fn-container-max:     1100px;
  --fn-container-wide:    1280px;
  --fn-container-narrow:  720px;
  --fn-nav-height:        64px;
}

/* ============================================================
   DARK MODE
   Appliquer data-theme="dark" sur <html> ou <body>
   ============================================================ */
[data-theme="dark"] {
  --fn-surface-bg:      #0f1220;
  --fn-surface-card:    #1a1f33;
  --fn-surface-subtle:  #242a46;
  --fn-surface-border:  #3a4066;
  --fn-text-primary:    #f0f4ff;
  --fn-text-secondary:  #adb5bd;
  --fn-border:          #3a4066;
  --fn-off-white:       #1a1f33;
  --fn-body:            #f0f4ff;
  --fn-gray:            #adb5bd;
}

/* Support natif prefers-color-scheme (fallback si pas de toggle JS) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fn-surface-bg:      #0f1220;
    --fn-surface-card:    #1a1f33;
    --fn-surface-subtle:  #242a46;
    --fn-surface-border:  #3a4066;
    --fn-text-primary:    #f0f4ff;
    --fn-text-secondary:  #adb5bd;
    --fn-border:          #3a4066;
    --fn-off-white:       #1a1f33;
    --fn-body:            #f0f4ff;
    --fn-gray:            #adb5bd;
  }
}