/**
 * MedFlow — Design System / Variables CSS
 * Palette, typographie, espacements, ombres, transitions
 */

:root {
    /* ── Couleurs principales ── */
    --bg:         #F4F1EB;
    --bg-alt:     #EDE9E0;
    --surface:    #FFFFFF;
    --surface-2:  #F9F7F3;
    --surface-3:  #F0EDE6;

    /* ── Navy (marque) ── */
    --navy:       #1B3252;
    --navy-light: #2A4A72;
    --navy-dark:  #0F1F35;

    /* ── Couleurs sémantiques ── */
    --red:        #C0392B;
    --red-light:  #FDECEA;
    --red-dark:   #962D22;

    --amber:      #9A5000;
    --amber-light:#FEF4E8;
    --amber-raw:  #E59A00;

    --green:      #1A6B45;
    --green-light:#EAF4EF;
    --green-dark: #135233;

    --blue:       #2563B8;
    --blue-light: #EBF2FC;
    --blue-dark:  #1B4A8C;

    /* ── Texte ── */
    --ink:        #1A1A2E;
    --ink-2:      #4A4A65;
    --ink-3:      #8A8AA8;
    --ink-4:      #B0B0C4;

    /* ── Bordures ── */
    --border:     #E0DAD0;
    --border-light:#EDE9E0;

    /* ── Typographie ── */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-ui:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* ── Tailles de texte ── */
    --text-xs:    0.6875rem;   /* 11px */
    --text-sm:    0.8125rem;   /* 13px */
    --text-base:  0.875rem;    /* 14px */
    --text-md:    1rem;        /* 16px */
    --text-lg:    1.125rem;    /* 18px */
    --text-xl:    1.5rem;      /* 24px */
    --text-2xl:   2.125rem;    /* 34px */
    --text-3xl:   2.875rem;    /* 46px */

    /* ── Espacements ── */
    --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:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-full:9999px;

    /* ── Ombres ── */
    --shadow-sm:  0 1px 2px rgba(26,26,46,0.04);
    --shadow:     0 1px 3px rgba(26,26,46,0.06), 0 4px 16px rgba(26,26,46,0.06);
    --shadow-lg:  0 2px 8px rgba(26,26,46,0.08), 0 12px 40px rgba(26,26,46,0.10);
    --shadow-xl:  0 4px 12px rgba(26,26,46,0.10), 0 20px 60px rgba(26,26,46,0.14);

    /* ── Transitions ── */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --duration:   0.18s;
    --duration-lg:0.3s;

    /* ── Z-index ── */
    --z-dropdown: 50;
    --z-sticky:   100;
    --z-modal:    200;
    --z-toast:    300;
}