/* ============================================================================
   🔥 FIREPROCESS — tokens.css
   ============================================================================
   Source de vérité unique pour couleurs, espacements, typo, ombres.
   À charger AVANT style.css et app.css.

   Direction : Light premium minimaliste inspirée Soro + signature orange flame.

   Structure :
     1. Palette brute (--fp-*)       → ne pas utiliser dans les composants
     2. Variables sémantiques        → utiliser celles-ci partout
     3. Typographie
     4. Espacements
     5. Rayons & ombres
     6. Transitions & z-index
   ============================================================================ */

/* Polices : Geist Sans + Geist Mono (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');


:root {

  /* ============================================================
     1. PALETTE BRUTE — ne jamais utiliser directement
        Toujours passer par les variables sémantiques ci-dessous
     ============================================================ */

  /* ——— Orange flamme (signature) ——— */
  --fp-flame:        #FF5722;
  --fp-flame-hover:  #E64A19;
  --fp-flame-soft:   #FFF3EF;
  --fp-flame-glow:   rgba(255, 87, 34, 0.12);
  --fp-flame-shadow: rgba(255, 87, 34, 0.25);

  /* ——— Neutres clairs (fonds) ——— */
  --fp-white:        #FFFFFF;
  --fp-cream:        #FAF9F7;          /* Fond chaud subtil */
  --fp-snow:         #FAFAFA;          /* Zones secondaires */

  /* ——— Gris (texte, bordures) ——— */
  --fp-gray-50:      #FAFAFA;
  --fp-gray-100:     #F4F4F5;
  --fp-gray-150:     #F0F0F0;
  --fp-gray-200:     #E5E5E7;
  --fp-gray-300:     #D4D4D8;
  --fp-gray-400:     #A1A1AA;
  --fp-gray-500:     #71717A;
  --fp-gray-600:     #52525B;
  --fp-gray-700:     #3F3F46;
  --fp-gray-800:     #27272A;
  --fp-gray-900:     #18181B;
  --fp-gray-950:     #0A0A0B;

  /* ——— États système ——— */
  --fp-success:      #10B981;
  --fp-success-soft: #ECFDF5;
  --fp-success-text: #047857;

  --fp-warning:      #F59E0B;
  --fp-warning-soft: #FEF3C7;
  --fp-warning-text: #B45309;

  --fp-error:        #EF4444;
  --fp-error-soft:   #FEE2E2;
  --fp-error-text:   #B91C1C;

  --fp-info:         #3B82F6;
  --fp-info-soft:    #EFF6FF;
  --fp-info-text:    #1D4ED8;


  /* ============================================================
     2. VARIABLES SÉMANTIQUES — à utiliser dans les composants
     ============================================================ */

  /* ——— Fonds ——— */
  --bg:              var(--fp-white);
  --bg-subtle:       var(--fp-snow);
  --bg-warm:         var(--fp-cream);
  --bg-card:         var(--fp-white);
  --bg-overlay:      rgba(10, 10, 11, 0.5);

  /* ——— Texte ——— */
  --text:            var(--fp-gray-950);
  --text-secondary:  var(--fp-gray-600);
  --text-tertiary:   var(--fp-gray-500);
  --text-muted:      var(--fp-gray-400);
  --text-on-flame:   var(--fp-white);
  --text-link:       var(--fp-flame);

  /* ——— Bordures ——— */
  --border-subtle:   var(--fp-gray-150);
  --border:          var(--fp-gray-200);
  --border-strong:   var(--fp-gray-300);
  --border-focus:    var(--fp-flame);

  /* ——— Accent (orange flamme) ——— */
  --accent:          var(--fp-flame);
  --accent-hover:    var(--fp-flame-hover);
  --accent-soft:     var(--fp-flame-soft);
  --accent-glow:     var(--fp-flame-glow);

  /* ——— Statuts process ——— */
  --status-pending:    var(--fp-gray-200);   /* ⚪ À venir */
  --status-progress:   var(--fp-flame);      /* 🔥 En cours */
  --status-completed:  var(--fp-success);    /* 🟢 Validé */
  --status-blocked:    var(--fp-error);      /* 🔴 Bloqué */

  --status-pending-bg:    var(--fp-gray-100);
  --status-progress-bg:   var(--fp-flame-soft);
  --status-completed-bg:  var(--fp-success-soft);
  --status-blocked-bg:    var(--fp-error-soft);


  /* ============================================================
     3. TYPOGRAPHIE
     ============================================================ */

  --font-sans:       'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:       'Geist Mono', 'SF Mono', Monaco, 'Cascadia Mono', monospace;

  /* Tailles (mobile-first, scale en desktop via media queries) */
  --text-xs:         12px;
  --text-sm:         14px;
  --text-base:       16px;
  --text-lg:         18px;
  --text-xl:         20px;
  --text-2xl:        24px;
  --text-3xl:        30px;
  --text-4xl:        40px;
  --text-5xl:        56px;

  /* Line heights correspondantes */
  --leading-xs:      16px;
  --leading-sm:      20px;
  --leading-base:    24px;
  --leading-lg:      28px;
  --leading-xl:      28px;
  --leading-2xl:     32px;
  --leading-3xl:     36px;
  --leading-4xl:     48px;
  --leading-5xl:     64px;

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

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


  /* ============================================================
     4. ESPACEMENTS (base 4px)
     ============================================================ */

  --space-0:         0;
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-8:         32px;
  --space-10:        40px;
  --space-12:        48px;
  --space-16:        64px;
  --space-20:        80px;
  --space-24:        96px;
  --space-32:        128px;


  /* ============================================================
     5. RAYONS & OMBRES
     ============================================================ */

  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       14px;
  --radius-xl:       20px;
  --radius-2xl:      28px;
  --radius-full:     9999px;

  --shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow:          0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md:       0 8px 24px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg:       0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-xl:       0 24px 64px rgba(0, 0, 0, 0.10);
  --shadow-flame:    0 4px 20px var(--fp-flame-shadow);
  --shadow-flame-lg: 0 8px 32px var(--fp-flame-shadow);


  /* ============================================================
     6. TRANSITIONS & Z-INDEX
     ============================================================ */

  --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:     cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --z-base:          0;
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-fixed:         300;
  --z-modal-bg:      400;
  --z-modal:         500;
  --z-popover:       600;
  --z-tooltip:       700;
  --z-toast:         800;

  /* Largeur max contenu */
  --max-content:     1280px;
  --max-narrow:      720px;
  --max-prose:       640px;
}


/* ============================================================
   RESPONSIVE — tailles agrandies en desktop
   ============================================================ */
@media (min-width: 768px) {
  :root {
    --text-4xl: 48px;
    --text-5xl: 72px;
    --leading-4xl: 56px;
    --leading-5xl: 80px;
  }
}