/*
 * Jetons de design (docs/design.md) : couleurs, typographie, espacements, rayons.
 * Toute valeur visuelle d'un gabarit ou d'un composant passe par une de ces
 * variables. Aucune couleur propre à une structure : l'outil est universel.
 */
:root {
    /* Fonds et bordures */
    --color-page: #F7F8FA;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F3F4F6;
    --color-border: #E5E7EB;
    --color-separator: #F0F1F3;
    --color-field-border: #D1D5DB;

    /* Textes */
    --color-text: #111827;
    --color-text-secondary: #4B5563;
    --color-text-menu: #374151;
    --color-text-on-primary: #FFFFFF;

    /* Principal : bouton principal, élément actif, liens */
    --color-primary: #1D4ED8;
    --color-primary-strong: #1E3A8A;
    --color-primary-soft: #EFF4FF;

    /* Présent, succès */
    --color-success: #15803D;
    --color-success-soft: #DCFCE7;
    --color-success-text: #166534;

    /* Absent, à traiter */
    --color-warning: #B45309;
    --color-warning-soft: #FEF3C7;
    --color-warning-softer: #FFFBEB;
    --color-warning-border: #FDE68A;
    --color-warning-text: #78350F;

    /* Typographie */
    --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-size-page-title: 1.75rem;   /* 28 px */
    --font-size-tile-value: 1.375rem;  /* 22 px */
    --font-size-card-title: 1.0625rem; /* 17 px */
    --font-size-card-title-small: 0.9375rem; /* 15 px */
    --font-size-text: 0.9375rem;       /* 15 px */
    --font-size-table: 0.875rem;       /* 14 px */
    --font-size-label: 0.8125rem;      /* 13 px */
    --font-size-counter: 0.75rem;      /* 12 px */

    /* Espacements */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;  /* entre deux blocs */
    --space-6: 24px;
    --space-8: 32px;  /* marges de la zone principale */
    --space-12: 48px;

    /* Rayons */
    --radius-card: 16px;
    --radius-tile: 12px;
    --radius-control: 10px;
    --radius-pill: 999px;

    /* Dimensions */
    --menu-width: 232px;
    --target-size: 44px;        /* cible tactile minimale */
    --target-size-large: 52px;  /* action finale sur tablette */
    --focus-ring: 0 0 0 3px rgb(29 78 216 / 35%);
}