/* ============================================
   MDN Plagiarism System — DESIGN TOKENS
   Système National d'Intégrité Académique
   Ministère de la Défense Nationale — Tunisie
   --------------------------------------------
   Thème : « Drapeau » — Rouge tunisien + Blanc nacré + Anthracite
   Fond blanc nacré, texte anthracite, accent rouge national.
   --------------------------------------------
   POINT D'ENTRÉE DU THÈME.
   Pour re-brander : ne modifier QUE les tokens de marque --dr-*
   ci-dessous. Tout le reste en dérive. Les alias legacy
   (--cyan-* / --emerald-*) sont conservés pour compatibilité
   avec le code hérité et repointés vers la palette MDN Plagiarism System :
     • --cyan-*    = ROUGE national (accent de marque)
     • --emerald-* = VERT validation (coche ✓ / « pris en charge »)
   ============================================ */

:root {
  /* ═══════════════════════════════════════════
     TOKENS DE MARQUE MDN Plagiarism System  (source de vérité)
     ═══════════════════════════════════════════ */

  /* ─── Rouge national tunisien (marque) ─── */
  --dr-red-200:  #FBD5D7;   /* teinte très claire (fonds, halos) */
  --dr-red-300:  #F7A6AC;
  --dr-red-400:  #F5323F;   /* clair / survol */
  --dr-red-500:  #E70013;   /* ROUGE DRAPEAU — couleur primaire */
  --dr-red-600:  #C1121F;   /* profond */
  --dr-red-700:  #9B0F18;   /* plus profond */
  --dr-red-800:  #7A0B12;   /* le plus profond */
  --dr-red-glow:        rgba(231, 0, 19, 0.08);
  --dr-red-glow-strong: rgba(231, 0, 19, 0.16);

  /* ─── Anthracite (encre, texte, structure) ─── */
  --dr-ink-900:  #17171B;   /* titres / texte primaire */
  --dr-ink-800:  #26262B;
  --dr-ink-700:  #45454E;   /* texte secondaire */
  --dr-ink-500:  #6B6B75;
  --dr-ink-400:  #8A8A94;   /* texte atténué */
  --dr-ink-200:  #D7D7DC;

  /* ─── Vert validation (sémantique « conforme / ✓ ») ─── */
  --dr-green-400: #22A15A;
  --dr-green-500: #1E7D46;
  --dr-green-600: #176A3A;

  /* ─── Blanc nacré (fonds) ─── */
  --dr-white:     #FFFFFF;
  --dr-pearl-1:   #FAF8F8;  /* blanc cassé très subtil */
  --dr-pearl-2:   #F4F1F1;  /* sections alternées */
  --dr-pearl-3:   #EFEBEC;

  /* ═══════════════════════════════════════════
     ALIAS LEGACY  (repointés → palette MDN Plagiarism System)
     ═══════════════════════════════════════════ */

  /* --cyan-*  ⇒  ROUGE national (accent de marque) */
  --cyan-200:  var(--dr-red-200);
  --cyan-300:  var(--dr-red-400);
  --cyan-400:  var(--dr-red-500);
  --cyan-500:  var(--dr-red-600);
  --cyan-600:  var(--dr-red-700);
  --cyan-glow: var(--dr-red-glow);
  --cyan-glow-strong: var(--dr-red-glow-strong);

  /* --emerald-*  ⇒  VERT validation (coche ✓) */
  --emerald-200: #B9E7CB;
  --emerald-300: var(--dr-green-400);
  --emerald-400: var(--dr-green-500);
  --emerald-500: var(--dr-green-500);
  --emerald-600: var(--dr-green-600);

  /* ─── Ambre (avertissement « partiel ») ─── */
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;

  /* ─── Alerte / fraude détectée ─── */
  --alert-red:    #EF4444;
  --alert-orange: #F97316;
  --alert-red-glow: rgba(239, 68, 68, 0.1);

  /* ─── Backgrounds — BLANC NACRÉ ─── */
  --bg-void:         var(--dr-white);
  --bg-surface:      var(--dr-pearl-1);
  --bg-elevated:     var(--dr-white);
  --bg-soft:         var(--dr-pearl-2);
  --bg-glass:        rgba(255, 255, 255, 0.85);
  --bg-glass-border: rgba(23, 23, 27, 0.07);

  /* ─── Section backgrounds (alternées) ─── */
  --bg-section-alt:  var(--dr-pearl-2);
  --bg-section-glow: radial-gradient(ellipse at 50% 0%, rgba(231,0,19,0.04) 0%, transparent 60%);

  /* ─── Text — ANTHRACITE SUR BLANC ─── */
  --text-primary:    var(--dr-ink-900);
  --text-secondary:  var(--dr-ink-700);
  --text-muted:      var(--dr-ink-400);
  --text-accent:     var(--dr-red-600);

  /* ─── Gradients — DUOTONE ROUGE ─── */
  --g-hero:       linear-gradient(135deg, #E70013 0%, #B00710 100%);
  --g-hero-text:  linear-gradient(135deg, #E70013 0%, #9B0F18 55%, #C1121F 100%);
  --g-scan:       linear-gradient(180deg, transparent 0%, rgba(231,0,19,0.15) 50%, transparent 100%);
  --g-btn:        linear-gradient(135deg, #E70013 0%, #B00710 100%);
  --g-btn-hover:  linear-gradient(135deg, #F5323F 0%, #C1121F 100%);
  --g-card:       linear-gradient(135deg, rgba(231,0,19,0.03) 0%, rgba(23,23,27,0.02) 100%);
  --g-glow:       radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(231,0,19,0.05), transparent 40%);
  --g-network:    linear-gradient(135deg, #C1121F 0%, #7A0B12 100%);
  --g-section:    linear-gradient(180deg, var(--bg-void) 0%, var(--bg-section-alt) 50%, var(--bg-void) 100%);

  /* ─── Typography ─── */
  --font-display:  'Space Grotesk', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;
  --font-ar:       'Noto Kufi Arabic', 'Cairo', 'Segoe UI', system-ui, sans-serif;

  --fz-xs:    0.75rem;
  --fz-sm:    0.875rem;
  --fz-base:  1.125rem;
  --fz-lg:    1.25rem;
  --fz-xl:    1.5rem;
  --fz-2xl:   2rem;
  --fz-3xl:   2.5rem;
  --fz-4xl:   3.5rem;
  --fz-hero:  clamp(3rem, 7vw, 6.5rem);

  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-body:    1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --tracking-tight:  -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.2em;

  /* ─── Spacing ─── */
  --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;
  --space-11: 10rem;
  --space-12: 12rem;

  /* ─── Layout ─── */
  --container-max:    1280px;
  --container-narrow: 960px;
  --container-wide:   1440px;
  --nav-height:       72px;
  --section-padding:  clamp(4rem, 10vh, 8rem);

  /* ─── Borders & Radius ─── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  --border-subtle:  1px solid rgba(23, 23, 27, 0.07);
  --border-accent:  1px solid rgba(231, 0, 19, 0.22);
  --border-glass:   1px solid rgba(23, 23, 27, 0.05);

  /* ─── Shadows — DOUCES pour thème blanc ─── */
  --shadow-sm:    0 1px 3px rgba(23, 23, 27, 0.04), 0 1px 2px rgba(23, 23, 27, 0.06);
  --shadow-md:    0 4px 16px rgba(23, 23, 27, 0.06), 0 2px 4px rgba(23, 23, 27, 0.04);
  --shadow-lg:    0 12px 40px rgba(23, 23, 27, 0.08), 0 4px 12px rgba(23, 23, 27, 0.04);
  --shadow-xl:    0 20px 60px rgba(23, 23, 27, 0.10);
  --shadow-glow:  0 0 30px rgba(231, 0, 19, 0.10);
  --shadow-glow-strong: 0 0 50px rgba(231, 0, 19, 0.16);

  /* ─── Transitions ─── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;

  /* ─── Glass — GIVRÉ BLANC ─── */
  --glass-blur:   20px;
  --glass-bg:     rgba(255, 255, 255, 0.85);
  --glass-border: rgba(23, 23, 27, 0.07);

  /* ─── Z-index scale ─── */
  --z-canvas:      1;
  --z-content:     10;
  --z-overlay:     50;
  --z-nav:         100;
  --z-cursor:      200;
  --z-modal:       500;

  /* ─── Aliases (utilisés par components/layout/doc) ─── */
  --fg-primary:    var(--text-primary);
  --fg-secondary:  var(--text-secondary);
  --fg-muted:      var(--text-muted);
  --fg-accent:     var(--text-accent);

  --leading-tight:   var(--lh-tight);
  --leading-heading: var(--lh-heading);
  --leading-relaxed: var(--lh-body);

  --radius:   var(--radius-md);
  --bg-card:  var(--bg-elevated);

  /* Alias couleur nationale pour usage direct (masthead, bandeau) */
  --tn-red:   var(--dr-red-500);
  --tn-white: var(--dr-white);
}