/* ═══════════════════════════════════════════════════════════
   SENAVICULTURE — DESIGN TOKENS
   ───────────────────────────────────────────────────────────
   Source unique de vérité pour les couleurs, typos, rayons,
   ombres, espacements. Chargé AVANT tout autre CSS.
   Règle d'or : jamais de hex en dur dans un composant —
   toujours passer par une variable. Un hex non tokenisé =
   une dette de design à rembourser.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND — échelle terracotta (ancre logo 🐓) ────────── */
  --brand-50:  #fdf6ee;  /* fond sable — surface de base */
  --brand-100: #fcd9a0;  /* accents chauds, labels secondaires sur fond foncé */
  --brand-200: #f5e2d0;  /* bordures, dividers, fond subtil */
  --brand-300: #d4722f;  /* accents interactifs, hover */
  --brand-400: #c5622a;
  --brand-500: #b5541c;  /* ACTION primaire (boutons, liens) */
  --brand-600: #9c4421;  /* hover action primaire */
  --brand-700: #7c3a1e;  /* titres, focus */
  --brand-800: #6b2e14;  /* headers, bandeaux */
  --brand-900: #3d1a0a;  /* texte héros, CTA section dark */

  /* ─── SURFACES ───────────────────────────────────────────── */
  --surface:         #fdf6ee;  /* fond app */
  --surface-raised:  #ffffff;  /* cartes, modales */
  --surface-sunken:  #f9f5f0;  /* zones inactives, hover-row */
  --surface-subtle:  #fffbf7;  /* tuiles délicates */
  --surface-dark:    #1a0d07;  /* footer, sections "dark" */

  /* ─── TEXTE ──────────────────────────────────────────────── */
  --text-primary:    #2c1810;  /* body, labels forts */
  --text-secondary:  #374151;  /* sous-titres, valeurs */
  --text-muted:      #6b7280;  /* aides, descriptions */
  --text-faint:      #9ca3af;  /* métas, timestamps */
  --text-invert:     #ffffff;  /* texte sur fond brand/dark */
  --text-invert-soft:#fcd9a0;  /* sous-texte sur fond brand */

  /* ─── STATUS (distinct du brand) ─────────────────────────── */
  --success-bg:   #f0fdf4;
  --success-200:  #bbf7d0;
  --success-500:  #22c55e;
  --success-600:  #16a34a;
  --success-700:  #166534;

  --warning-bg:   #fef3c7;
  --warning-200:  #fde68a;
  --warning-500:  #f59e0b;
  --warning-700:  #92400e;
  --warning-900:  #78350f;

  --danger-bg:    #fef2f2;
  --danger-200:   #fecaca;
  --danger-300:   #fca5a5;
  --danger-500:   #ef4444;
  --danger-700:   #991b1b;
  --danger-900:   #7f1d1d;

  --info-bg:      #eff6ff;
  --info-200:     #bfdbfe;
  --info-500:     #3b82f6;
  --info-600:     #2563eb;
  --info-700:     #1e40af;
  --info-900:     #1e3a8a;

  /* ─── BORDER (dérive surfaces) ───────────────────────────── */
  --border-subtle:   #f5e2d0;  /* divider par défaut */
  --border-soft:     #f3ece3;
  --border-default:  #e5e7eb;

  /* ─── TYPOGRAPHIE ────────────────────────────────────────── */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Échelle typographique — step = 1.125 (musical fourth atténué) */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  32px;
  --fs-4xl:  40px;
  --fs-5xl:  48px;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* ─── RAYONS ─────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─── OMBRES ─────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(44,24,16,.06);
  --shadow-sm:    0 2px 8px rgba(44,24,16,.06);
  --shadow-md:    0 4px 16px rgba(44,24,16,.08);
  --shadow-lg:    0 12px 32px rgba(44,24,16,.12);
  --shadow-xl:    0 24px 64px rgba(44,24,16,.22);
  --shadow-brand: 0 4px 16px rgba(181,84,28,.3);
  --shadow-brand-lg: 0 8px 28px rgba(181,84,28,.4);
  --shadow-focus: 0 0 0 4px rgba(181,84,28,.15);

  /* ─── ESPACEMENTS (échelle 4px) ──────────────────────────── */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ─── LAYOUT ─────────────────────────────────────────────── */
  --container-max:    1400px;
  --container-landing:1200px;
  --sidebar-width:    240px;
  --header-height:    88px;

  /* ─── Z-INDEX (échelle) ──────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-nav:     200;
  --z-modal:   2000;
  --z-toast:   9999;
  --z-splash:  9999;

  /* ─── GRADIENTS (récurrents → centralisés) ──────────────── */
  --gradient-brand:  linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 45%, var(--brand-400) 100%);
  --gradient-hero:   linear-gradient(135deg, var(--brand-900) 0%, var(--brand-800) 30%, var(--brand-600) 60%, var(--brand-400) 100%);
  --gradient-action: linear-gradient(135deg, var(--brand-500), var(--brand-300));
  --gradient-warm:   linear-gradient(135deg, var(--brand-300), var(--warning-500));

  /* ─── ANIMATIONS ─────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

/* ═══════════════════════════════════════════════════════════
   BASE — application des tokens fondamentaux
   ═══════════════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text-primary);
  line-height: var(--lh-normal);
}

/* Les titres héritent du serif display — appliqué globalement mais
   contournable en mettant explicitement font-family sur le noeud. */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--brand-700);
  line-height: var(--lh-tight);
}
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  color: var(--brand-700);
}

/* Les éléments interactifs héritent de Inter pour la netteté UI. */
button, input, select, textarea {
  font-family: var(--font-body);
}

/* Focus visible accessible (WCAG 2.4.7) — complète :focus existants. */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
button:focus-visible,
a:focus-visible {
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — overrides surface, text, border tokens
   Activated via [data-theme="dark"] on <html>
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --surface:         #121212;
  --surface-raised:  #1e1e1e;
  --surface-sunken:  #0a0a0a;
  --surface-subtle:  #1a1a1a;
  --surface-dark:    #000000;

  --text-primary:    #e5e5e5;
  --text-secondary:  #c4c4c4;
  --text-muted:      #9ca3af;
  --text-faint:      #6b7280;
  --text-invert:     #1a1a1a;

  --border-subtle:   #2a2a2a;
  --border-soft:     #333333;
  --border-default:  #404040;

  --shadow-xs:    0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.3);
  --shadow-md:    0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:    0 12px 32px rgba(0,0,0,.5);

  color-scheme: dark;
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal {
  background: var(--surface-raised);
  border-color: var(--border-subtle);
}

[data-theme="dark"] header {
  background: linear-gradient(135deg, #1a0d07 0%, #2c1810 45%, #3d2015 100%);
}

[data-theme="dark"] .kpi-card {
  background: var(--surface-raised);
}

[data-theme="dark"] th {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

[data-theme="dark"] .welcome-banner {
  background: var(--surface-raised);
  border-color: var(--border-subtle);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --surface:         #121212;
    --surface-raised:  #1e1e1e;
    --surface-sunken:  #0a0a0a;
    --text-primary:    #e5e5e5;
    --text-secondary:  #c4c4c4;
    --border-subtle:   #2a2a2a;
    --border-default:  #404040;
    color-scheme: dark;
  }
}