/* ============================================================
   NUKUNTCHE — Design System foundations
   Direction de marque : C — Midnight & Coral
   Tokens : couleurs, typographie, espacements, rayons, ombres.

   NOTE d'intégration NUKUNTCHE :
   - Chargé UNIQUEMENT par l'entrypoint assets/nukuntche.js
     (pages modernes), jamais par app.js.
   - Le @import de components.css d'origine a été retiré : il est
     importé explicitement en JS dans nukuntche.js (AssetMapper ne
     suit pas les @import CSS pour les nouveaux fichiers).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Échelle de marque : Midnight (bleu nuit) ---- */
  --c-midnight-50:  #EEF2F8;
  --c-midnight-100: #DDE4EF;
  --c-midnight-200: #B9C6DA;
  --c-midnight-300: #8499B8;
  --c-midnight-400: #4D6589;
  --c-midnight-500: #1E466F;
  --c-midnight-600: #16365C;
  --c-midnight-700: #0F2A4A;
  --c-midnight-800: #0B1F3A;
  --c-midnight-900: #0B1220;

  /* ---- Accent : Coral (réservé aux actions clés) ---- */
  --c-coral-50:  #FFF1EF;
  --c-coral-100: #FFE0DB;
  --c-coral-200: #FFC2B8;
  --c-coral-300: #FF9E8E;
  --c-coral-400: #FF8576;
  --c-coral-500: #FF6B5B;
  --c-coral-600: #E2503F;
  --c-coral-700: #C13E2F;

  /* ---- Neutres (slate, teinte froide) ---- */
  --c-slate-0:   #FFFFFF;
  --c-slate-25:  #FBFCFE;
  --c-slate-50:  #F6F8FB;
  --c-slate-100: #EDF1F7;
  --c-slate-150: #E3E9F1;
  --c-slate-200: #D9E0EB;
  --c-slate-300: #C2CCDB;
  --c-slate-400: #94A3B8;
  --c-slate-500: #64748B;
  --c-slate-600: #4A586E;
  --c-slate-700: #33415A;
  --c-slate-800: #1E2A40;
  --c-slate-900: #0F1B2D;

  /* ---- Sémantiques ---- */
  --c-success-50:#ECFDF3; --c-success-100:#D1FADF; --c-success-500:#16A34A; --c-success-600:#15803D; --c-success-700:#166534;
  --c-warning-50:#FFFAEB; --c-warning-100:#FEF0C7; --c-warning-500:#D97706; --c-warning-600:#B45309; --c-warning-700:#92400E;
  --c-danger-50: #FEF2F2; --c-danger-100: #FEE2E2; --c-danger-500: #DC2626; --c-danger-600: #B91C1C; --c-danger-700: #991B1B;
  --c-info-50:   #EFF6FF; --c-info-100:   #DBEAFE; --c-info-500:   #2563EB; --c-info-600:   #1D4ED8; --c-info-700:   #1E40AF;

  /* ====== Rôles sémantiques (utilisés par les composants) ====== */
  --color-bg:            var(--c-slate-25);
  --color-bg-subtle:     var(--c-slate-50);
  --color-surface:       var(--c-slate-0);
  --color-surface-2:     var(--c-slate-50);
  --color-surface-sunken:var(--c-slate-100);

  --color-border:        var(--c-slate-200);
  --color-border-subtle: var(--c-slate-150);
  --color-border-strong: var(--c-slate-300);

  --color-heading:       var(--c-slate-900);
  --color-text:          var(--c-slate-700);
  --color-text-muted:    var(--c-slate-500);
  --color-text-subtle:   var(--c-slate-400);
  --color-text-inverse:  var(--c-slate-0);

  --color-primary:          var(--c-midnight-700);
  --color-primary-hover:    var(--c-midnight-600);
  --color-primary-active:   var(--c-midnight-800);
  --color-primary-contrast: #FFFFFF;
  --color-primary-subtle:   var(--c-midnight-50);
  --color-primary-subtle-contrast: var(--c-midnight-700);

  --color-accent:          var(--c-coral-500);
  --color-accent-hover:    var(--c-coral-600);
  --color-accent-active:   var(--c-coral-700);
  --color-accent-contrast: #FFFFFF;
  --color-accent-subtle:   var(--c-coral-50);
  --color-accent-subtle-contrast: var(--c-coral-700);

  --color-success:var(--c-success-500); --color-success-subtle:var(--c-success-50); --color-success-text:var(--c-success-700);
  --color-warning:var(--c-warning-500); --color-warning-subtle:var(--c-warning-50); --color-warning-text:var(--c-warning-700);
  --color-danger: var(--c-danger-500);  --color-danger-subtle: var(--c-danger-50);  --color-danger-text: var(--c-danger-700);
  --color-info:   var(--c-info-500);    --color-info-subtle:   var(--c-info-50);    --color-info-text:   var(--c-info-700);

  --color-focus-ring: rgba(255, 107, 91, .35);

  /* ---- Typographie ---- */
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-base:15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-.02em; --tracking-snug:-.01em; --tracking-wide:.04em; --tracking-wider:.08em;

  /* ---- 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;

  /* ---- Rayons (modérés) ---- */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:10px;
  --radius-xl:14px; --radius-2xl:18px; --radius-3xl:24px; --radius-full:9999px;

  /* ---- Ombres ---- */
  --shadow-xs: 0 1px 2px rgba(11,18,32,.05);
  --shadow-sm: 0 1px 3px rgba(11,18,32,.07), 0 1px 2px rgba(11,18,32,.04);
  --shadow-md: 0 4px 14px rgba(11,18,32,.07), 0 2px 4px rgba(11,18,32,.04);
  --shadow-lg: 0 12px 28px rgba(11,18,32,.10), 0 4px 8px rgba(11,18,32,.05);
  --shadow-xl: 0 24px 48px rgba(11,18,32,.14);
  --shadow-accent: 0 6px 18px rgba(255,107,91,.30);
  --shadow-primary: 0 6px 18px rgba(15,42,74,.22);

  /* ---- Divers ---- */
  --ring-width:3px; /* @kind spacing */
  --z-dropdown:1000; /* @kind other */
  --z-sticky:1100; /* @kind other */
  --z-overlay:1200; /* @kind other */
  --z-modal:1300; /* @kind other */
  --z-toast:1400; /* @kind other */
  --transition-fast:120ms cubic-bezier(.4,0,.2,1); /* @kind other */
  --transition:180ms cubic-bezier(.4,0,.2,1); /* @kind other */
}

/* ====================== Mode sombre ====================== */
[data-theme="dark"] {
  --color-bg:            #0A0F1A;
  --color-bg-subtle:     #0D1421;
  --color-surface:       #111A2B;
  --color-surface-2:     #16223A;
  --color-surface-sunken:#0B1322;

  --color-border:        #233248;
  --color-border-subtle: #1B2840;
  --color-border-strong: #324563;

  --color-heading:       #F2F6FC;
  --color-text:          #C3CEDF;
  --color-text-muted:    #8696AE;
  --color-text-subtle:   #5C6E89;
  --color-text-inverse:  #0A0F1A;

  --color-primary:          var(--c-midnight-500);
  --color-primary-hover:    var(--c-midnight-400);
  --color-primary-active:   var(--c-midnight-600);
  --color-primary-contrast: #FFFFFF;
  --color-primary-subtle:   rgba(30,70,111,.20);
  --color-primary-subtle-contrast: var(--c-midnight-200);

  --color-accent-subtle:   rgba(255,107,91,.14);
  --color-accent-subtle-contrast: var(--c-coral-300);

  --color-success-subtle:rgba(22,163,74,.16); --color-success-text:#86EFAC;
  --color-warning-subtle:rgba(217,119,6,.16); --color-warning-text:#FCD34D;
  --color-danger-subtle: rgba(220,38,38,.16); --color-danger-text:#FCA5A5;
  --color-info-subtle:   rgba(37,99,235,.16); --color-info-text:#93C5FD;

  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.45);
  --shadow-md:0 4px 14px rgba(0,0,0,.5);
  --shadow-lg:0 12px 28px rgba(0,0,0,.55);
  --shadow-xl:0 24px 48px rgba(0,0,0,.6);
}

/* ====================== Thème « Nuit douce » (dim) ====================== */
[data-theme="dim"] {
  --color-bg:            #15213A;
  --color-bg-subtle:     #1A2844;
  --color-surface:       #20304F;
  --color-surface-2:     #27395B;
  --color-surface-sunken:#17243E;

  --color-border:        #34486B;
  --color-border-subtle: #2A3C5C;
  --color-border-strong: #44608A;

  --color-heading:       #ECF1FA;
  --color-text:          #CAD6E8;
  --color-text-muted:    #91A1BC;
  --color-text-subtle:   #687C9E;
  --color-text-inverse:  #15213A;

  --color-primary:          var(--c-midnight-400);
  --color-primary-hover:    var(--c-midnight-300);
  --color-primary-active:   var(--c-midnight-500);
  --color-primary-contrast: #FFFFFF;
  --color-primary-subtle:   rgba(77,101,137,.28);
  --color-primary-subtle-contrast: var(--c-midnight-100);

  --color-accent-subtle:   rgba(255,107,91,.18);
  --color-accent-subtle-contrast: var(--c-coral-200);

  --color-success-subtle:rgba(22,163,74,.18); --color-success-text:#9DECB9;
  --color-warning-subtle:rgba(217,119,6,.18); --color-warning-text:#FCD879;
  --color-danger-subtle: rgba(220,38,38,.18); --color-danger-text:#FCAFAF;
  --color-info-subtle:   rgba(37,99,235,.18); --color-info-text:#A6CBFF;

  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 3px rgba(0,0,0,.32);
  --shadow-md:0 4px 14px rgba(0,0,0,.36);
  --shadow-lg:0 12px 28px rgba(0,0,0,.42);
  --shadow-xl:0 24px 48px rgba(0,0,0,.5);
}

/* ====================== Reset léger ====================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { margin:0; font-family: var(--font-display); color: var(--color-heading); font-weight: var(--fw-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
p { margin:0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: inherit; }

.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }

::selection { background: var(--color-accent-subtle); color: var(--color-accent-subtle-contrast); }