/* ============================================================
   Design Tokens — Palette inspirée de l'ancienne app (bleu + vert).
   ============================================================ */
:root {
    /* ===== Couleurs de marque ===== */
    --c-primary:     #124660;   /* Bleu foncé professionnel */
    --c-primary-d:   #0d3449;
    --c-primary-l:   #d6e1e8;   /* Bleu très clair pour fonds actifs */

    --c-secondary:   #1B9476;   /* Vert turquoise */
    --c-secondary-d: #157760;
    --c-secondary-l: #d7ede5;

    --c-accent:      #C7DBC2;   /* Vert pastel */
    --c-accent-d:    #8BD59E;   /* Vert moyen */

    /* ===== États ===== */
    --c-success:     #1B9476;
    --c-success-d:   #157760;
    --c-success-l:   #d7ede5;

    --c-warning:     #b45309;
    --c-warning-l:   #fef3c7;

    --c-danger:      #b91c1c;
    --c-danger-d:    #991b1b;
    --c-danger-l:    #fee2e2;

    --c-info:        #0c5460;
    --c-info-l:      #d6e1e8;

    /* ===== Neutres ===== */
    --c-bg:          #f4f6f8;          /* fond général très légèrement bleuté */
    --c-surface:     #ffffff;
    --c-surface-2:   #f8fafb;
    --c-border:      #e2e8ee;
    --c-border-strong: #cbd5dd;
    --c-text:        #1f2937;
    --c-text-muted:  #5a6878;
    --c-text-faint:  #94a0ad;
    --c-text-on-primary: #ffffff;

    /* ===== Typographie ===== */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;

    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   16px;
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  28px;

    --lh-tight:  1.2;
    --lh-normal: 1.5;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;

    /* ===== Espacement (échelle 4px) ===== */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  40px;
    --sp-8:  48px;

    /* ===== Layout ===== */
    --sidebar-w: 240px;
    --topbar-h:  56px;

    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 10px;

    --shadow-sm: 0 1px 2px rgba(18, 70, 96, .06);
    --shadow:    0 1px 3px rgba(18, 70, 96, .10), 0 1px 2px rgba(18, 70, 96, .06);
    --shadow-lg: 0 4px 16px rgba(18, 70, 96, .10);

    --ring: 0 0 0 3px rgba(27, 148, 118, .25);

    --transition: 120ms ease-out;
}