/* ============================================================
   Saytoo Design Tokens
   Source prioritaire : maquette styles.css → docs/maquettes/
   Complété par DESIGN.md pour les tokens non couverts.
   ============================================================ */

:root {
  /* ─── Couleurs de marque ──────────────────────────────── */
  --saytoo-blue: #0033A1;
  --saytoo-blue-600: #00297F;
  --saytoo-blue-700: #001F5E;
  --saytoo-blue-50: #EEF2FB;
  --saytoo-blue-100: #D9E3F7;

  /* ─── Surfaces ────────────────────────────────────────── */
  --bg: #FBFBFD;
  --bg-subtle: #F5F7FA;   /* Fond gris clair — headers/footers de tableaux */
  --surface: #FFFFFF;

  /* ─── Texte ───────────────────────────────────────────── */
  --text: #0F1524;
  --text-secondary: #4A5264;
  --text-disabled: #9BA3B5;
  --text-on-primary: #FFFFFF;

  /* ─── Bordures ────────────────────────────────────────── */
  --border: #E2E6EF;
  --border-focus: var(--saytoo-blue);

  /* ─── Statuts ─────────────────────────────────────────── */
  --success: #15803D;
  --success-bg: #DCFCE7;
  --warning: #B45309;
  --warning-bg: #FEF3C7;
  --danger: #B91C1C;
  --danger-bg: #FEE2E2;
  --info: #1D4ED8;
  --info-bg: #DBEAFE;
  --neutral: #374151;
  --neutral-bg: #F3F4F6;
  --purple: #6D28D9;
  --purple-bg: #EDE9FE;

  /* ─── Dashboard ──────────────────────────────────────── */
  --color-accent-db: #2563eb;

  /* ─── Ombres ──────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15, 21, 36, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 21, 36, 0.08);
  --shadow-lg: 0 8px 32px rgba(15, 21, 36, 0.12);

  /* ─── Layout ──────────────────────────────────────────── */
  --h-header: 52px;
  --w-sidebar: 280px;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;

  /* ─── Typographie ─────────────────────────────────────── */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* ─── Field display (couples label / valeur — réutilisable) ───────────────── */

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field--full { grid-column: 1 / -1; }

/* Grille 2 colonnes pour les couples label/valeur — responsive 1 col < 600px */
.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

@media (max-width: 600px) {
    .field-grid { grid-template-columns: 1fr; }
}

.field-label {
    font-size: var(--font-size-xs);          /* 11px */
    font-weight: var(--font-weight-medium);  /* 500 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    line-height: 1.2;
}

.field-value {
    font-size: var(--font-size-base);          /* 14px */
    font-weight: var(--font-weight-semibold);  /* 600 */
    color: var(--text);
    line-height: 1.4;
}

/* Pour les longues valeurs texte (descriptions, diagnostics) */
.field-value-long {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);  /* 500 — plus lisible sur plusieurs lignes */
    color: var(--text);
    line-height: 1.55;
    white-space: pre-wrap;
}

.field-label--danger { color: var(--danger); }
.field-value--danger { color: var(--danger); }

/* ─── Reset minimal ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: var(--font-size-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}