/* ============================================================
   BASE.CSS — Design Tokens + Foundation
   Le Monde Moderne — LMM v3 / Giscardpunk × Verge

   GP Dynamic Typography handles font loading + sizing.
   This file: palette, tokens, grain, selection, resets.
   ============================================================ */

:root {
    /* ── Palette ── */
    --lmm-moutarde:       #E8A317;
    --lmm-moutarde-light: #F2C94C;
    --lmm-moutarde-dark:  #C78B0A;
    --lmm-brique:         #C1440E;
    --lmm-brique-light:   #D4612E;
    --lmm-noir:           #1A1A1A;
    --lmm-noir-profond:   #111111;
    --lmm-anthracite:     #2D2D2D;
    --lmm-gris:           #6B7280;
    --lmm-gris-clair:     #D1D5DB;
    --lmm-creme:          #F5F0E8;
    --lmm-blanc:          #FFFFFF;
    --lmm-parchemin:      #E5E5E0;

    /* ── Semantic (light / article pages) ── */
    --color-bg:             var(--lmm-creme);
    --color-surface:        var(--lmm-blanc);
    --color-text:           var(--lmm-noir);
    --color-text-secondary: var(--lmm-gris);
    --color-accent:         var(--lmm-moutarde);
    --color-accent-hover:   var(--lmm-moutarde-dark);
    --color-danger:         var(--lmm-brique);
    --color-border:         #E5E5E0;
    --color-border-strong:  var(--lmm-noir);

    /* ── Dark semantic (homepage, header, footer) ── */
    --dark-bg:              var(--lmm-noir);
    --dark-bg-elevated:     var(--lmm-anthracite);
    --dark-text:            var(--lmm-creme);
    --dark-text-secondary:  var(--lmm-gris);
    --dark-border:          #333333;
    --dark-border-subtle:   rgba(255, 255, 255, 0.08);

    /* ── Font aliases ── */
    --font-titre: 'Bricolage Grotesque', sans-serif;
    --font-corps: 'Source Serif 4', Georgia, serif;
    --font-ui:    'Space Grotesk', sans-serif;

    /* ── Spacing scale ── */
    --space-2xs: 2px;
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    /* ── Layout ── */
    --content-width:  1200px;
    --article-width:  680px;
    --sidebar-width:  320px;
    --nav-height:     112px;  /* 72px brand + 40px nav */
    --border-radius:  2px;

    /* ── Motion ── */
    --ease-out: cubic-bezier(0.25, 0, 0.25, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-base: 250ms var(--ease-out);
    --transition-slow: 400ms var(--ease-out);
}

/* ── Dark mode (user toggle) ── */
.dark-mode {
    --color-bg:             #1A1A1A;
    --color-surface:        #242424;
    --color-text:           #E5E0D8;
    --color-text-secondary: #8A8680;
    --color-border:         #3A3A36;
    --color-border-strong:  var(--lmm-moutarde);
}

/* ── Base resets ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

/* ── Grain texture (offset print) ── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Selection ── */
::selection {
    background: var(--lmm-moutarde);
    color: var(--lmm-noir);
}

/* ── Focus ── */
:focus-visible {
    outline: 2px solid var(--lmm-moutarde);
    outline-offset: 2px;
}

/* ── Blockquote base ── */
blockquote {
    border-left: 4px solid var(--lmm-moutarde);
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-lg) 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

/* ── Scrollbar (webkit) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--lmm-gris-clair); border-radius: 3px; }
.dark-mode ::-webkit-scrollbar-thumb { background: #444; }