/* =========================================================================
   Keros Design System — Design tokens (single source of truth)
   - Ces variables doivent rester strictement alignées avec design.md
   - Tout composant Keros (HTML/CSS, React, Vue) doit les consommer
   ========================================================================= */

:root {
  /* --- Brand TEEO (aligné Guide Identité Visuelle 2025) --- */
  --color-primary:         #157AB3; /* Bleu TEEO */
  --color-primary-hover:   #0F5F8C;
  --color-primary-active:  #0B4D72;
  --color-primary-soft:    #E1F0F8;
  --color-secondary:       #485194; /* Indigo Profond TEEO (sous-titres, contrastes forts) */
  --color-secondary-soft:  #E6E8F2;
  --color-accent:          #E9A547; /* Orange Vif TEEO (attention, notifications) */
  --color-accent-soft:     #FBEFD8;

  /* --- Surfaces & neutres --- */
  --color-bg:              #FFFFFF;
  --color-surface:         #FFFFFF;
  --color-surface-alt:     #F5F7FA;
  --color-border:          #DEDFDF; /* Gris Clair TEEO */
  --color-border-strong:   #C1C4C7;
  --color-text:            #1A1F2E;
  --color-text-muted:      #485194; /* Indigo profond pour texte secondaire */
  --color-text-soft:       #8A909C;

  /* --- Fonctionnelles --- */
  --color-success:         #2E8B57;
  --color-success-bg:      #E1F2E8;
  --color-warning:         #E9A547; /* Orange TEEO */
  --color-warning-bg:      #FBEFD8;
  --color-danger:          #E14929; /* Rouge Alerte TEEO */
  --color-danger-bg:       #FDE3DC;
  --color-info:            #157AB3; /* Bleu TEEO */
  --color-info-bg:         #E1F0F8;

  /* --- Sévérités d'anomalies (charte TEEO) --- */
  --color-sev-low:         #8A909C;
  --color-sev-medium:      #E9A547;
  --color-sev-high:        #D87826;
  --color-sev-critical:    #E14929;

  /* --- Data viz (palette restreinte TEEO : Bleu = Donnée A, Orange = Donnée B) --- */
  --chart-1: #157AB3; /* Bleu TEEO — donnée principale */
  --chart-2: #485194; /* Indigo profond — donnée secondaire */
  --chart-3: #E9A547; /* Orange — accent / comparaison */
  --chart-4: #2E8B57; /* Vert sobre — référence */
  --chart-5: #E14929; /* Rouge alerte — anomalie */
  --chart-6: #5C8DB8; /* Bleu acier — série tertiaire */
  --chart-grid: #DEDFDF;

  /* --- Espacements (échelle 4px) --- */
  --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;

  /* --- Rayons --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* --- Ombres --- */
  --shadow-sm: 0 1px 2px  rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12);

  /* --- Typographie (charte TEEO : Inter Tight / Roboto / Sans-Serif moderne) --- */
  --font-sans: "Inter Tight", "Inter", "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;

  /* --- Lignes & hauteurs --- */
  --lh-tight: 1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* --- Bordures --- */
  --border-1: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);

  /* --- Focus --- */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);

  /* --- Densités de tableau --- */
  --row-h-default: 40px;
  --row-h-compact: 32px;
}