/**
 * Design tokens — source unique (Manager Vmax)
 * Chargé en premier via header.html.twig / base_moon.
 * Unités : rem / em / % / vh / vw (pas de px hors commentaires).
 * Densité globale : html { font-size: 80% } dans app.css (~12.8px racine).
 */

:root {
    /* ——— Typographie ——— */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-base: var(--font-sans);
    --font-geist: var(--font-sans); /* alias legacy */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-body: 400;
    --font-weight-label: 500;
    --font-weight-title: 600;
    --font-weight-display: 600;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Échelle visuelle (titre page / section / corps / label) */
    --text-page: 1.3125rem;    /* titres de page */
    --text-section: 1rem;      /* sous-titres de section */
    --text-body: 0.9375rem;    /* texte courant */
    --text-label: 0.78125rem;  /* labels / secondaire */

    --text-xs: var(--text-label);
    --text-sm: var(--text-body);
    --text-md: var(--text-section);
    --text-lg: var(--text-page);
    --text-xl: 1.375rem;

    --font-size-xs: var(--text-label);
    --font-size-sm: var(--text-body);
    --font-size-base: var(--text-body);
    --font-size-md: var(--text-section);
    --font-size-lg: var(--text-page);
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.75rem;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;

    /* ——— Espacements (grille unique) ——— */
    --space-xs: 0.25rem;   /* 4 */
    --space-sm: 0.5rem;    /* 8 */
    --space-md: 0.75rem;   /* 12 */
    --space-lg: 1rem;      /* 16 */
    --space-xl: 1.5rem;    /* 24 */
    --space-2xl: 2rem;     /* 32 */
    --space-3xl: 2.5rem;   /* 40 */

    /* Aliases pad / gap (patient_show, navbar) */
    --pad-1: var(--space-sm);
    --pad-2: var(--space-md);
    --pad-3: var(--space-lg);
    --pad-4: var(--space-xl);
    --gap-1: var(--space-xs);
    --gap-2: var(--space-sm);
    --gap-3: var(--space-md);
    --gap-4: var(--space-lg);
    --gap-5: var(--space-xl);
    --sep-h: var(--space-xl);
    --layout-gap: var(--space-lg);
    --layout-gutter: var(--space-lg);

    /* Aliases spacing (form, dashboard) */
    --spacing-xs: var(--space-sm);
    --spacing-sm: var(--space-md);
    --spacing-md: var(--space-lg);
    --spacing-lg: var(--space-xl);
    --spacing-xl: var(--space-2xl);
    --spacing-2xl: var(--space-3xl);
    --spacing-3xl: 3rem;

    /* ——— Rayons (2 valeurs max + legacy) ——— */
    --radius-sm: 0.5rem;   /* 8 — boutons, inputs, badges */
    --radius-lg: 0.75rem;  /* 12 — cartes */
    --radius-md: var(--radius-sm);
    --radius-xl: var(--radius-lg);
    --radius-card: var(--radius-sm);
    --radius: var(--radius-lg);

    /* ——— Couleurs (charte) ——— */
    --color-sidebar: #01244d;
    --sidebar-bg: #01244d;
    --page-header-nav: #01244d;

    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-primary-light: #dbeafe;
    --color-text-primary: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;
    --color-border: #e5e7eb;
    --color-border-focus: #3b82f6;
    --color-bg: #f8f9fa;
    --color-bg-card: #ffffff;
    --color-bg-input: #f8fafc;
    --color-success: #22c55e;
    --color-success-hover: #16a34a;
    --color-danger: #ef4444;
    --color-danger-hover: #b91c1c;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    --accent: var(--color-primary);
    --muted: var(--color-text-secondary);
    --card-bg: var(--color-bg-card);
    --success: var(--color-success);
    --glass: rgba(255, 255, 255, 0.6);

    /* ——— Ombres / bordures ——— */
    --border-width-thin: 0.0625rem;
    --border-width-base: 0.09375rem;
    --border-width-medium: 0.125rem;
    --border-width-thick: 0.1875rem;
    --shadow-xs: 0 0.125rem 0.25rem;
    --shadow-sm: 0 0.125rem 0.5rem;
    --shadow-md: 0 0.25rem 0.75rem;
    --shadow-lg: 0 0.375rem 1.75rem;
    --shadow: 0 0.5rem 1.5rem rgba(2, 6, 23, 0.08);
    --shadow-inset-xs: inset 0 0.125rem 0.25rem;
    --shadow-inset-sm: inset 0 0.0625rem 0.1875rem;

    /* ——— Layout sidebar / header ——— */
    --sidebar-width-expanded: 23.4375rem;
    --sidebar-width-collapsed: 3rem;
    --sidebar-width: var(--sidebar-width-expanded);
    --sidebar-collapsed-width: var(--sidebar-width-collapsed);
    --sidebar-expanded: var(--sidebar-width-expanded);
    --sidebar-collapsed: var(--sidebar-width-collapsed);
    --sidebar-w: var(--sidebar-width-expanded);
    --sidebar-collapsed-w: var(--sidebar-width-collapsed);
    --sidebar-padding-x: var(--space-lg);
    --sidebar-padding-y: var(--space-lg);
    --sidebar-pad-x: var(--space-lg);
    --sidebar-pad-y: var(--space-lg);
    --sidebar-item-height: 2.5em;
    --sidebar-item-radius: var(--radius-sm);
    --sidebar-gap: var(--space-sm);
    --sidebar-header-h: 4rem;
    --header-height: 3.5rem;
    /* Gouttière horizontale unique (listes, show, dashboard) — référence /patients */
    --page-padding-x: var(--space-lg);
    --container-max-w: 120rem;
    --toggle-size: 1.75rem;
    --h-search: 2.75rem;
    --h-toolbar: 3.5rem;
    --control-h: 2.25rem;

    --sidebar-input-bg: rgba(255, 255, 255, 0.08);
    --sidebar-input-border: rgba(255, 255, 255, 0.2);
    --sidebar-spacing-xs: 0.5em;
    --sidebar-spacing-sm: 0.75em;
    --sidebar-spacing-md: 1em;
    --sidebar-spacing-lg: 1.5em;
    --sidebar-spacing-xl: 2em;
    --sidebar-line-height-tight: 1.2;
    --sidebar-line-height-normal: 1.5;
    --sidebar-line-height-relaxed: 1.75;
    --sidebar-radius-sm: var(--radius-sm);
    --sidebar-radius-md: var(--radius-sm);
    --sidebar-radius-lg: var(--radius-lg);
    --sidebar-radius-xl: var(--radius-lg);
    --sidebar-font-size-base: clamp(1rem, 1vw + 0.55rem, 1.2rem);
    --sidebar-font-size-sm: clamp(0.9rem, 0.9vw + 0.45rem, 1rem);
    --sidebar-font-size-md: clamp(1.1rem, 1.1vw + 0.65rem, 1.35rem);
    --sidebar-font-size-lg: clamp(1.2rem, 1.2vw + 0.75rem, 1.45rem);
    --sidebar-font-size-xl: clamp(1.4rem, 1.4vw + 0.85rem, 1.7rem);

    --menu-icon-text-gap: 2%;
    --menu-text-chevron-gap: 1.5%;
    --menu-border-width: 0.0625em;
    --menu-box-shadow-base: 0 0.125em 0.25em rgba(255, 255, 255, 0.1);
    --menu-box-shadow-hover: 0 0.25em 0.5em rgba(255, 255, 255, 0.15);
    --menu-box-shadow-active: 0 0.0625em 0.125em rgba(255, 255, 255, 0.08);

    /* Composants récurrents */
    --avatar-sm: 2rem;
    --avatar-md: 3rem;
    --icon-sm: 1rem;
    --badge-size: 1.25rem;
    --tab-px: var(--space-lg);
    --tab-py: var(--space-md);
    --tab-border: 0.125rem;
    --overflow-max: 16.25rem;
    --select-min: 10ch;
    --select-ideal: 18ch;
    --select-max: 32ch;

    /* Tailles utilitaires (form) */
    --size-xs: 0.75rem;
    --size-sm: 1.125rem;
    --size-md: 1.375rem;
    --size-lg: 1.5rem;
    --size-xl: 1.75rem;
    --size-2xl: 2.5rem;
    --size-3xl: 3.25rem;
    --size-4xl: 5rem;
    --size-5xl: 6.25rem;
    --size-6xl: 12.5rem;
    --size-7xl: 13.75rem;
    --size-8xl: 15.625rem;
    --size-9xl: 25rem;
    --size-10xl: 37.5rem;
    --size-11xl: 40rem;
    --size-12xl: 56.25rem;
    --size-13xl: 75rem;
    --size-14xl: 112.5rem;
    --offset-xs: 0.1875rem;
    --offset-far: -624.9375rem;
    --breakpoint-sm: 37.5rem;
    --breakpoint-md: 56.25rem;
    --breakpoint-lg: 75rem;
}

/* Base typo globale (pages app) — !important pour gagner sur Bootstrap si rechargé après */
html {
    font-family: var(--font-sans);
}

html body {
    font-family: var(--font-sans) !important;
    font-weight: var(--font-weight-normal);
    font-size: var(--text-body);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6,
.page-title,
.patient-header-name,
.entity-page-title {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
}

label,
.form-label,
.login-label,
.btn,
button {
    font-weight: var(--font-weight-medium);
}

/* Utilitaires typo / poids */
.fw-bold, .fw-semibold, .font-semibold, .font-bold, strong, b {
    font-weight: var(--font-weight-medium) !important;
}
.fw-medium, .font-medium {
    font-weight: var(--font-weight-medium) !important;
}
.fw-normal, .font-normal {
    font-weight: var(--font-weight-normal) !important;
}
.text-page-title {
    font-size: var(--text-page);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}
.text-section-title {
    font-size: var(--text-section);
    font-weight: var(--font-weight-medium);
}
.text-body {
    font-size: var(--text-body);
    font-weight: var(--font-weight-normal);
}
.text-label {
    font-size: var(--text-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

h1, .page-title, .patient-header-name {
    font-size: var(--text-page);
}
h2, h3, .section-title {
    font-size: var(--text-section);
}