/* Base : éléments HTML par défaut. */

html, body {
    background: var(--obsidian-1000);
    color: var(--paper);
}

body {
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-weight: 400;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--paper);
}

h1 { font-size: var(--fs-h1); font-variation-settings: "opsz" 144; }
h2 { font-size: var(--fs-h2); font-variation-settings: "opsz" 96; }
h3 { font-size: var(--fs-h3); font-variation-settings: "opsz" 36; }

p { color: var(--paper); }
p + p { margin-top: var(--sp-4); }

a {
    color: var(--paper);
    transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--copper); }

strong, b { font-weight: 600; }
em, i { font-style: italic; }

hr {
    border: 0;
    border-top: 1px solid var(--obsidian-500);
    margin: var(--sp-7) 0;
}

::placeholder { color: var(--mute); opacity: 1; }

input, textarea, select {
    background: transparent;
    border: 0;
}

/* Scrollbar discrète, accent cuivre */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--obsidian-900); }
::-webkit-scrollbar-thumb { background: var(--obsidian-500); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--copper-deep); }

/* Display utilities */
.display-xxl {
    font-family: var(--font-display);
    font-size: var(--fs-display-xxl);
    line-height: 0.95;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 144;
}

.display-xxl em, .display-italic { font-style: italic; }

/* Mono caps utilitaire — méta techniques */
.mono {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--paper-dim);
    font-weight: 400;
}

.mono-paper { color: var(--paper); }
.mono-mute { color: var(--mute); }
.mono-copper { color: var(--copper); }

/* Text utilities */
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); }
.lead { font-size: 1.25rem; line-height: 1.5; color: var(--paper); max-width: 56ch; }
.measure { max-width: 65ch; }
.dim { color: var(--paper-dim); }
.mute { color: var(--mute); }
.copper { color: var(--copper); }
.italic { font-style: italic; }

/* Visually hidden */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}