/* ==========================================================================
   Design tokens — variables centrales du système visuel Revadi.
   Modifier ici pour ajuster toute la charte du site.
   ========================================================================== */

:root {
    /* --- Couleurs --- */
    --color-bg:            #fafaf7;   /* blanc cassé, chaud */
    --color-bg-soft:       #f2f0ea;
    --color-surface:       #ffffff;
    --color-ink:           #0b1c33;   /* bleu nuit — accent Revadi */
    --color-ink-soft:      #3a4a63;
    --color-muted:         #8a8a82;
    --color-line:          #e6e3dc;
    --color-accent:        #24476f;   /* bleu accent secondaire */
    --color-accent-hover:  #0b1c33;
    --color-success:       #2f6f4e;
    --color-warning:       #b3711c;
    --color-error:         #a63737;
    --color-overlay:       rgb(11 28 51 / 0.55);

    /* --- Typographie --- */
    --font-serif:      "Cormorant Garamond", "EB Garamond", Georgia, serif;
    --font-display:    "Velista", "Cormorant Garamond", Georgia, serif; /* titres de thèmes */
    --font-sans:       system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:       ui-monospace, "SF Mono", Consolas, monospace;

    --font-size-xs:    0.75rem;
    --font-size-sm:    0.875rem;
    --font-size-base:  1rem;
    --font-size-lg:    1.125rem;
    --font-size-xl:    1.375rem;
    --font-size-2xl:   1.875rem;
    --font-size-3xl:   2.5rem;
    --font-size-4xl:   3.5rem;

    --line-height-tight:  1.15;
    --line-height-base:   1.55;
    --line-height-loose:  1.75;

    --letter-spacing-tight:  -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide:   0.08em;
    --letter-spacing-widest: 0.24em;

    /* --- Espacements (rythme 4px) --- */
    --space-1:   0.25rem;  /* 4  */
    --space-2:   0.5rem;   /* 8  */
    --space-3:   0.75rem;  /* 12 */
    --space-4:   1rem;     /* 16 */
    --space-5:   1.5rem;   /* 24 */
    --space-6:   2rem;     /* 32 */
    --space-7:   3rem;     /* 48 */
    --space-8:   4rem;     /* 64 */
    --space-9:   6rem;     /* 96 */

    /* --- Rayons --- */
    --radius-sm:  2px;
    --radius-md:  4px;
    --radius-lg:  8px;
    --radius-pill: 999px;

    /* --- Ombres --- */
    --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.05);
    --shadow-md:  0 4px 12px rgb(0 0 0 / 0.08);
    --shadow-lg:  0 12px 32px rgb(0 0 0 / 0.12);
    --shadow-text: 0 2px 12px rgb(0 0 0 / 0.55);

    /* --- Layout --- */
    --container-max:  1280px;
    --container-pad:  1rem;
    --header-height:  4rem;

    /* --- Transitions --- */
    --transition-fast:   120ms ease-out;
    --transition-base:   220ms ease-out;
    --transition-slow:   400ms ease-out;

    /* --- Z-index --- */
    --z-header:  100;
    --z-nav:     110;
    --z-overlay: 500;
    --z-modal:   1000;
}

@media (min-width: 720px) {
    :root {
        --container-pad: 2rem;
        --font-size-3xl: 3rem;
        --font-size-4xl: 4.5rem;
    }
}