/* ╔══════════════════════════════════════════════════════════════════╗
   ║  CETEMOH · Design Tokens                                          ║
   ║  Single source of truth for style.css · portal.css · admin.css   ║
   ║  Loaded after reset.css via layouts                                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */

:root {
  /* ── Brand legacy palette (referenced by views & existing CSS) ── */
  --navy:           #0f2a3f;
  --navy-light:     #1e4a6e;
  --navy-muted:     #2c5270;
  --gold:           #d4942f;
  --gold-light:     #e8b44d;
  --gold-pale:      #fdf3e0;
  --teal:           #2a7a7a;
  --teal-light:     #3a9a9a;
  --cream:          #faf7f2;
  --cream-dark:     #f2ede4;
  --white:          #ffffff;
  --warm-black:     #1a1614;
  --charcoal:       #2d2826;
  --stone:          #5a524a;
  --stone-light:    #8a827a;
  --stone-pale:     #d6d0c8;
  --border:         #e5ddd4;
  --border-light:   #f0eae2;

  /* ── Semi-semantic (preferred for new code) ── */
  --primary:        var(--navy);
  --primary-light:  var(--navy-light);
  --primary-muted:  var(--navy-muted);
  --secondary:      var(--teal);
  --accent:         var(--gold);
  --accent-light:   var(--gold-light);
  --accent-soft:    var(--gold-pale);

  /* ── Text ── */
  --text-primary:   #1a1614;
  --text-body:      #2d2826;
  --text-muted:     #5a524a;
  --text-faint:     #7a726a;
  --text-disabled:  #a9a096;
  --text-on-dark:   #ffffff;
  --text-on-accent: var(--navy);

  /* ── Surfaces ── */
  --bg-page:        #faf7f2;
  --bg-card:        #ffffff;
  --bg-sunken:      #f2ede4;
  --bg-elevated:    #fbf6ee;     /* subtle warm tint for hover in light mode */
  --bg-inverse:     var(--navy);
  --bg-overlay:     rgba(15, 42, 63, .55);
  --bg-glow:        rgba(212, 148, 47, .08);

  /* ── Status / feedback ── */
  --success:        #2e7d5e;
  --danger:         #c4433a;
  --warning:        #c4902a;
  --info:           #3a7a9a;

  /* ── Spacing scale (4 px rhythm) ── */
  --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;

  /* ── Radii ── */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ── Shadows (layered) ── */
  --shadow-xs:        0 1px 2px rgba(15, 42, 63, .05);
  --shadow-sm:        0 2px 6px rgba(15, 42, 63, .06), 0 1px 3px rgba(15, 42, 63, .04);
  --shadow-md:        0 10px 24px rgba(15, 42, 63, .08), 0 4px 8px rgba(15, 42, 63, .04);
  --shadow-lg:        0 20px 48px rgba(15, 42, 63, .12), 0 8px 16px rgba(15, 42, 63, .06);
  --shadow-xl:        0 32px 80px rgba(15, 42, 63, .16);
  --shadow-focus:     0 0 0 3px rgba(30, 74, 110, .18);
  --shadow-glow-gold: 0 8px 22px rgba(212, 148, 47, .28);
  --shadow-glow-teal: 0 8px 22px rgba(42, 122, 122, .20);

  /* ── Accent underline / hairline (flat, replaces rainbow gradients) ── */
  --accent-bar: var(--accent);

  /* ── Typography ── */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
  --leading-tight: 1.2;
  --leading-snug:  1.4;
  --leading:       1.65;
  --leading-sm:    1.35;

  /* ── Motion ── */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-instant: .1s;
  --dur-fast:    .18s;
  --dur:         .28s;
  --dur-slow:    .5s;
  --transition:  var(--dur) var(--ease);

  /* ── Z-index layers ── */
  --z-base:   1;
  --z-sticky: 50;
  --z-drawer: 80;
  --z-header: 90;
  --z-modal:  100;
  --z-toast:  200;
  --z-tooltip: 300;

  /* ── Layout ── */
  --container:    1200px;
  --header-h:     60px;
  --header-h-sc:  52px;
  --sidebar-w:    230px;
  --touch-target: 44px;
}

/* ───────────  DARK MODE  ───────────
   Identité du "primary" maintenue : --navy / --primary restent
   la couleur d'identité (juste assombrie), seuls les accents
   chatoyants (gold/teal) gardent leur éclat. Les sémantiques
   --text-body, --bg-card, --border basculent vers la version
   nuit pour préserver la lisibilité. */
body.dark-mode {
  --navy:           #1a2d4a;
  --navy-light:     #5a86b8;
  --navy-muted:     #142238;
  --gold:           #e8b44d;
  --gold-light:     #f0c86a;
  --gold-pale:      #2a2215;
  --teal:           #3a9a9a;
  --teal-light:     #4db8b8;
  --cream:          #0f1117;
  --cream-dark:     #181b24;
  --white:          #1e2130;
  --warm-black:     #e4e6eb;
  --charcoal:       #c4c7cf;
  --stone:          #9ca3af;
  --stone-light:    #6b7280;
  --stone-pale:     #374151;
  --border:         #2a2d3a;
  --border-light:   #222536;

  --primary:        #1a2d4a;
  --primary-light:  #5a86b8;
  --primary-muted:  #142238;
  --secondary:      #3a9a9a;
  --accent:         #e8b44d;
  --accent-soft:    rgba(232, 180, 77, .14);

  --text-primary:   #e4e6eb;
  --text-body:      #c4c7cf;
  --text-muted:     #9ca3af;
  --text-faint:     #6b7280;
  --text-disabled:  #4a5266;

  --bg-page:        #0f1117;
  --bg-card:        #181b24;
  --bg-sunken:      #0a0d14;
  --bg-elevated:    #242836;     /* brighter than bg-card on hover */
  --bg-inverse:     var(--navy);
  --bg-overlay:     rgba(0, 0, 0, .72);
  --bg-glow:        rgba(232, 180, 77, .10);

  --success:        #5aba8a;
  --danger:         #e87068;
  --warning:        #d4a040;
  --info:           #6abada;

  --shadow-xs:        0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm:        0 2px 6px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md:        0 10px 24px rgba(0, 0, 0, .5), 0 4px 8px rgba(0, 0, 0, .35);
  --shadow-lg:        0 20px 48px rgba(0, 0, 0, .55);
  --shadow-xl:        0 32px 80px rgba(0, 0, 0, .7);
  --shadow-focus:     0 0 0 3px rgba(122, 176, 216, .28);
  --shadow-glow-gold: 0 8px 24px rgba(232, 180, 77, .35);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}