/* Seul fichier autorisé à contenir des couleurs littérales. */
@property --loader-dot {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

:root {
    color-scheme: dark;

    /* Monochrome : noir, blanc cassé doux et gris (le blanc pur fatigue l'œil sur le noir) */
    --ink: #0A0A0A;
    --ink-2: #161616;
    --paper: #D6D6D3;
    --grey: #9A9A97;

    /* Accents : blanc cassé lumineux et gris sombre, sans couleur */
    --white: #E4E4E1;
    --grey-dim: #6E6E6E;

    /* Dérivés */
    --line: color-mix(in srgb, var(--paper) 22%, transparent);

    /* Étoile gothique à 4 branches acérées (branches verticales plus longues, flancs concaves).
       Utilisée en masque : sa couleur vient de `background: currentColor`. Même tracé que #star dans index.html. */
    --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0Q52 48 80 50Q52 52 50 100Q48 52 20 50Q48 48 50 0Z'/%3E%3C/svg%3E");

    /* DA « visionneuse » : filets tendus qui s'estompent, crochets d'angle, coin biseauté.
       Les filets et crochets prennent `currentColor` : on règle leur teinte avec `color`. */
    --line-fade: linear-gradient(90deg, transparent, currentColor 12%, currentColor 88%, transparent);
    --corner: linear-gradient(currentColor, currentColor);
    --corner-marks:
        var(--corner) top left / 28px 1px no-repeat,
        var(--corner) top left / 1px 28px no-repeat,
        var(--corner) top right / 28px 1px no-repeat,
        var(--corner) top right / 1px 28px no-repeat,
        var(--corner) bottom left / 28px 1px no-repeat,
        var(--corner) bottom left / 1px 28px no-repeat,
        var(--corner) bottom right / 28px 1px no-repeat,
        var(--corner) bottom right / 1px 28px no-repeat;

    /* Trames CSS : la couleur des points vient de `color` sur l'élément */
    --dots: radial-gradient(circle at center, currentColor 0 34%, transparent 36%);
    --dots-fat: radial-gradient(circle at center, currentColor 0 46%, transparent 48%);
    --dot-step: 10px;
    --dot-step-fat: 16px;

    /* Typographie */
    --font-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Impact, sans-serif;
    --font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --condensed: 'wdth' 62;
    --wide: 'wdth' 125;

    /* Échelle extrême */
    --size-label: 0.78rem;
    --size-body: 1.0625rem;
    --size-lead: clamp(1.15rem, 1.6vw, 1.45rem);
    --size-title: clamp(3.5rem, 13vw, 13rem);
    --size-giant: clamp(5rem, 24vw, 26rem);

    /* Mise en page */
    --gutter: clamp(1rem, 3.5vw, 3rem);
    --header-h: 64px;

    /* Mouvement */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-snap: cubic-bezier(0.7, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* mouvement à l'écran */
    --dur-press: 120ms; /* retour à l'appui */
    --dur-fast: 140ms;
    --dur-exit: 180ms;  /* sorties : plus rapides que les entrées */
    --dur: 240ms;       /* interface : toujours sous 300 ms */
    --dur-slow: 900ms;
}