/* ============================================
   WAB. — Fondations
   Réinitialisation, jetons de couleur, typographie,
   et les quelques primitives partagées par toutes
   les sections (étiquettes, boutons, apparitions).
   ============================================ */

/* ── Polices ──
   Instrument Sans (Rodrigo Fuenzalida, SIL Open Font License, voir
   assets/fonts/InstrumentSans-OFL.txt) : texte et titres. Un seul
   fichier variable (graisses 400 à 700), réduit aux glyphes du français
   (34 Ko). Préchargé par chaque page.

   Sligoil, en signature (noms de fichiers, codes, heure, terminal), en
   trois fichiers statiques (Micro, Medium, Bold) réunis
   sous une seule famille : font-weight choisit le bon fichier et le
   navigateur ne fabrique jamais de faux gras.

   La version variable n'est pas utilisée : son axe de graisse va de
   90 à 120 au lieu de l'échelle habituelle 100–900, et les valeurs
   font-weight du site ne tomberaient pas dessus.

   Sligoil — Ariel Martín Pérez, Velvetyne Type Foundry, sous licence
   SIL Open Font License (voir assets/fonts/Sligoil-OFL.txt). */
@font-face {
    font-family: 'Sligoil';
    src: url('../assets/fonts/Sligoil-Micro.woff2') format('woff2'),
        url('../assets/fonts/Sligoil-Micro.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sligoil';
    src: url('../assets/fonts/Sligoil-MicroMedium.woff2') format('woff2'),
        url('../assets/fonts/Sligoil-MicroMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sligoil';
    src: url('../assets/fonts/Sligoil-MicroBold.woff2') format('woff2'),
        url('../assets/fonts/Sligoil-MicroBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Sans';
    src: url('../assets/fonts/InstrumentSans-Var.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ── Reset ── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Jetons ── */
:root {
    color-scheme: light;

    /* Valeurs de secours, hors WAB OS : chaque page (body.os) reçoit
       les vraies dans os-tokens.css, qui les redéfinit toutes. */
    --paper: #ffffff;
    --white: #ffffff;
    --ink: #101214;
    --ink-muted: #55585f;
    --line: rgba(16, 18, 20, 0.12);
    --line-strong: rgba(16, 18, 20, 0.22);
    --accent: #161bf2;
    --font-display: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Sligoil', ui-monospace, 'SF Mono', Menlo, monospace;
    --w-regular: 400;
    --w-strong: 600;
    --gutter: clamp(16px, 4vw, 40px);
    --radius-pill: 999px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

html {
    accent-color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: var(--w-regular);
    line-height: 1.6;
    background: var(--paper);
    color: var(--ink);
    overflow-x: hidden;
}

::selection {
    background: var(--ink);
    color: var(--white);
}

input,
textarea,
select {
    caret-color: var(--ink);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

/* L'heure du studio se rafraîchit toutes les 30 secondes : des
   chiffres de largeur fixe évitent que la ligne tressaute à chaque
   changement de minute — ce que la police monospace faisait
   gratuitement avant. */
time {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 4px;
}