/*
 * Design tokens Expeditions Mysterieuses.
 * Source unique pour couleurs, espaces, typographie, ombres, transitions.
 * Les fichiers legacy (app.css, page-*.css) reprennent progressivement ces tokens.
 */
:root {
    /* === Palette primaire === */
    --em-ink-900: #0f0c0a;
    --em-ink-800: #17120f;
    --em-ink-700: #251a13;
    --em-ink-500: #4a392a;
    --em-ink-300: #5a4737;
    --em-ink-100: #dfd1be;

    --em-paper-50: #fbf7f1;
    --em-paper-100: #f8f3ea;
    --em-paper-200: #f3ede3;
    --em-paper-300: #efe1cb;

    --em-amber-900: #7a4f23;
    --em-amber-700: #9a5a00;
    --em-amber-500: #d8a15a;
    --em-amber-300: #f3c98a;
    --em-amber-200: #f4cf97;
    --em-amber-100: #fbe5c2;

    --em-sage-600: #3d5a43;
    --em-crimson-700: #a32020;
    --em-forest-700: #1f6b32;

    /* === Semantiques === */
    --em-surface: rgba(31, 24, 19, 0.9);
    --em-surface-strong: rgba(21, 17, 14, 0.97);
    --em-surface-paper: rgba(255, 252, 246, 0.94);
    --em-surface-paper-soft: rgba(251, 246, 237, 0.88);

    --em-text: #f5efe5;
    --em-text-on-paper: var(--em-ink-700);
    --em-text-muted: var(--em-ink-100);
    --em-text-muted-on-paper: var(--em-ink-300);

    --em-accent: var(--em-amber-500);
    --em-accent-strong: var(--em-amber-200);
    --em-focus: var(--em-amber-300);

    --em-line: rgba(208, 169, 109, 0.2);
    --em-line-paper: rgba(90, 66, 40, 0.12);

    /* === Espaces (modular scale base 4px) === */
    --em-space-1: 0.25rem;
    --em-space-2: 0.5rem;
    --em-space-3: 0.75rem;
    --em-space-4: 1rem;
    --em-space-5: 1.25rem;
    --em-space-6: 1.5rem;
    --em-space-8: 2rem;
    --em-space-10: 2.5rem;
    --em-space-12: 3rem;
    --em-space-16: 4rem;

    /* === Radius === */
    --em-radius-sm: 10px;
    --em-radius-md: 14px;
    --em-radius-lg: 18px;
    --em-radius-xl: 24px;
    --em-radius-2xl: 32px;
    --em-radius-pill: 999px;

    /* === Ombres === */
    --em-shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.08);
    --em-shadow-md: 0 10px 24px rgba(31, 22, 15, 0.12);
    --em-shadow-lg: 0 24px 56px rgba(31, 22, 15, 0.14);
    --em-shadow-xl: 0 36px 84px rgba(31, 22, 15, 0.18);
    --em-shadow-hero: 0 28px 90px rgba(0, 0, 0, 0.35);
    --em-glow-amber: 0 0 24px rgba(243, 201, 138, 0.35);

    /* === Typographie === */
    --em-font-serif: Georgia, "Times New Roman", serif;
    --em-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --em-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --em-fz-xs: 0.72rem;
    --em-fz-sm: 0.85rem;
    --em-fz-md: 1rem;
    --em-fz-lg: 1.18rem;
    --em-fz-xl: clamp(1.15rem, 2.2vw, 1.45rem);
    --em-fz-2xl: clamp(1.4rem, 3vw, 2rem);
    --em-fz-3xl: clamp(1.8rem, 4vw, 2.8rem);
    --em-fz-4xl: clamp(2.2rem, 5.5vw, 3.6rem);

    --em-lh-tight: 1.15;
    --em-lh-body: 1.55;
    --em-lh-loose: 1.75;

    --em-ls-wide: 0.18em;
    --em-ls-display: 0.02em;

    /* === Transitions === */
    --em-duration-fast: 160ms;
    --em-duration-base: 240ms;
    --em-duration-slow: 480ms;
    --em-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --em-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* === Z-index === */
    --em-z-nav: 50;
    --em-z-overlay: 80;
    --em-z-modal: 100;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --em-duration-fast: 0ms;
        --em-duration-base: 0ms;
        --em-duration-slow: 0ms;
    }
}