/* ============================================================
   Dentasoft Support — Design Tokens (Chantier H)
   Système strict : couleurs, type, espacement, formes, ombres.
   Modifier UNIQUEMENT ici pour les changements globaux.
   ============================================================ */

:root {
  /* ============================================
     COULEURS — Neutres (Slate, légèrement bleutés)
     ============================================ */
  --color-bg:           #F8FAFC;   /* page background */
  --color-surface:      #FFFFFF;   /* cards, panels, modals */
  --color-surface-2:    #F1F5F9;   /* alt surface (kanban col bg, etc.) */
  --color-surface-hover:#F8FAFC;   /* hover on transparent buttons */

  --color-border:       #E2E8F0;   /* default border */
  --color-border-strong:#CBD5E1;   /* emphasized border (focused inputs, etc.) */

  --color-text:         #0F172A;   /* primary text */
  --color-text-2:       #475569;   /* secondary text (muted) */
  --color-text-3:       #94A3B8;   /* tertiary (placeholder, captions, very muted) */

  /* ============================================
     COULEURS — Accent unique : Dentasoft Orange
     ============================================ */
  --color-primary:      #F08A24;
  --color-primary-hover:#D9740F;
  --color-primary-active:#B85F08;
  --color-primary-soft: #FEF3E6;
  --color-primary-ring: rgba(240, 138, 36, 0.18);   /* focus ring transparent */

  /* ============================================
     COULEURS — Statuts (cohérent, pas d'arc-en-ciel)
     ============================================ */
  --color-blue:         #2563EB;   /* nouveau */
  --color-blue-soft:    #EFF6FF;
  --color-amber:        #D97706;   /* en cours */
  --color-amber-soft:   #FEF3C7;
  --color-gray:         #64748B;   /* en attente / fermé */
  --color-gray-soft:    #F1F5F9;
  --color-green:        #16A34A;   /* résolu / ok */
  --color-green-soft:   #ECFDF5;
  --color-red:          #DC2626;   /* urgent / erreur */
  --color-red-soft:     #FEF2F2;

  /* ============================================
     ESPACEMENT — Système strict 4 → 48 px
     ============================================ */
  --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;

  /* ============================================
     FORMES
     ============================================ */
  --radius-sm: 6px;     /* chips, small buttons */
  --radius:    8px;     /* default — cards, buttons, inputs */
  --radius-lg: 12px;    /* modals, large panels */

  /* ============================================
     OMBRES — Deux niveaux, jamais lourdes
     ============================================ */
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:     0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg:  0 24px 48px rgba(15, 23, 42, 0.18);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);

  /* ============================================
     TYPOGRAPHIE
     ============================================ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Hiérarchie typographique */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;

  --tracking-tight: -0.015em;
  --tracking-wide:  0.04em;

  /* ============================================
     LAYOUT
     ============================================ */
  --topbar-h:   52px;
  --nav-w:      220px;
  --nav-w-collapsed: 64px;

  /* ============================================
     TRANSITIONS — discrètes, jamais lourdes
     ============================================ */
  --transition-fast: 120ms ease;
  --transition:      180ms ease;

  /* Compat anciens noms (pour ne pas casser le code existant) */
  --brand:       var(--color-primary);
  --brand-600:   var(--color-primary-hover);
  --brand-50:    var(--color-primary-soft);
  --bg:          var(--color-bg);
  --surface:     var(--color-surface);
  --surface-2:   var(--color-surface-2);
  --border:      var(--color-border);
  --text:        var(--color-text);
  --muted:       var(--color-text-2);
  --muted-2:     var(--color-text-3);
  --danger:      var(--color-red);
  --danger-50:   var(--color-red-soft);
  --ok:          var(--color-green);
  --primary:     var(--color-primary);
  --st-nouveau:    var(--color-blue);
  --st-encours:    var(--color-amber);
  --st-attente:    var(--color-gray);
  --st-resolu:     var(--color-green);
  --st-cloture:    var(--color-text-3);
  --r-sm:        var(--radius-sm);
  --r:           var(--radius);
  --r-lg:        var(--radius-lg);
  --shadow-md:   var(--shadow);
  --font:        var(--font-sans);
  --mono:        var(--font-mono);
  --bg-card:     var(--color-surface);
  --bg-soft:     var(--color-surface-2);
  --bg-secondary: var(--color-surface-2);
}

/* ============================================
   RESET + base
   ============================================ */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Focus visible amélioré (accessibilité) */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Selection */
::selection {
  background: var(--color-primary-soft);
  color: var(--color-primary-active);
}

/* Scrollbar sobre */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 6px;
  border: 2px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-3); }