/* ============================================
   WAB OS — jetons « Klein » (partagés par toutes les pages : body.os)
   Le bleu Klein par défaut, et cinq autres teintes (os-tints.css) que
   prend un bloc avec data-tint ; le reste est encre et gris. Toutes les valeurs vivent ici, en OKLCH.
   Voir DESIGN-SYSTEM.md (section « Klein ») et OS-COMPONENTS.md.
   ============================================ */

.os,
:root:has(body.os) {
    /* ── Bleu Klein, cinq nuances ── (contrastes mesurés)
       --klein : aplats, boutons, signes ; texte blanc dessus 8,5:1,
         lui-même lisible en petit texte sur blanc (8,5:1).
       --klein-ink : le bleu des petits textes sur le bleu clair (8,2:1).
       --klein-deep : liseré des touches, lignes sombres des écrans.
       --klein-tint / --klein-wash : barres de fenêtre, survols.
       --klein-soft : bleu lisible sur une surface sombre (terminal). */
    --klein: oklch(0.45 0.29 266);
    --klein-hi: oklch(0.56 0.25 266);
    --klein-ink: oklch(0.38 0.24 266);
    --klein-deep: oklch(0.3 0.19 266);
    --klein-tint: oklch(0.9 0.055 268);
    --klein-wash: oklch(0.955 0.022 268);
    --klein-soft: oklch(0.8 0.1 268);
    --on-klein: oklch(1 0 0);
    /* Le texte d'une touche claire posée sur la teinte. */
    --klein-pair: var(--klein-ink);
    /* La teinte quand elle écrit : l'aplat s'il se lit sur blanc, sinon
       sa version foncée (les teintes claires, os-tints.css). */
    --klein-text: var(--klein);

    /* ── Neutres ── --ink 18,8:1, --ink-muted 7,1:1, --ink-faint 5,5:1
       sur blanc ; sur --panel : 6,4:1 et 4,9:1. --desk : sous les points. */
    --desk: oklch(0.985 0 0);
    --paper: oklch(1 0 0);
    --panel: oklch(0.96 0.004 85);
    --ink: oklch(0.18 0.005 265);
    --ink-muted: oklch(0.46 0.012 265);
    --ink-faint: oklch(0.52 0.012 265);
    --line: oklch(0.18 0.005 265 / 0.12);
    --line-strong: oklch(0.18 0.005 265 / 0.22);
    --edge: oklch(0.18 0.005 265 / 0.16);
    --desk-dot: oklch(0.72 0 0 / 0.42);
    --desk-grid: 16px;
    --hover-tint: oklch(0.18 0.005 265 / 0.05);

    /* ── Matières ── grain fractal à 3 % ; écran Klein : une ligne d'un
       pixel tous les trois, vignette, bords assombris, halo ; trame :
       bandes SVG (assets/textures) en masque, bord qui s'émiette. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* Sans vignette : écran étroit autour d'une fenêtre. */
    --dither-top: url('../assets/textures/dither-top.svg');
    --dither-bottom: url('../assets/textures/dither-bottom.svg');
    --dither-left: url('../assets/textures/dither-left.svg');
    --dither-right: url('../assets/textures/dither-right.svg');
    --dither: 16px;

    /* ── Rayons et traits ── */
    --r-win: 12px;
    --r-panel: 20px;
    --r-ctl: 8px;
    --r-key: 6px;
    --r-px: 3px;
    --r-pill: 999px;
    --hair: 1px;

    /* ── Relief ── éclairé d'en haut : fil blanc sur l'arête haute,
       pénombre de 2 px en bas, ombre courte puis portée ; --sheet : la
       feuille décalée dessous, l'effet de pile. */
    --relief: inset 0 1px 0 oklch(1 0 0), inset 0 -2px 0 oklch(0.18 0.005 265 / 0.06);
    --shadow-object: 0 1px 2px oklch(0.18 0.005 265 / 0.14), 0 12px 32px -18px oklch(0.18 0.005 265 / 0.4);
    --shadow-soft: 0 1px 2px oklch(0.18 0.005 265 / 0.08), 0 8px 20px -10px oklch(0.18 0.005 265 / 0.18);
    --shadow-lift: 0 2px 4px oklch(0.18 0.005 265 / 0.1), 0 24px 48px -20px oklch(0.18 0.005 265 / 0.45);
    --sheet: 7px 7px 0 oklch(0.18 0.005 265 / 0.1);

    /* ── Touches ── (key-btn.css) bleu plein et blanc. */
    --key-light: linear-gradient(180deg, oklch(1 0 0), oklch(0.975 0.002 265));
    --key-light-relief: inset 0 1px 0 oklch(1 0 0), inset 0 -2px 0 oklch(0.18 0.005 265 / 0.08), 0 1px 2px oklch(0.18 0.005 265 / 0.2), 0 3px 8px oklch(0.18 0.005 265 / 0.1);
    --key-pressed: inset 0 1px 2px oklch(0.12 0.02 266 / 0.22), 0 0 0 oklch(0 0 0 / 0);

    /* ── Verre gris ── la barre du haut, le dock, les fenêtres ouvertes. */
    --glass: oklch(1 0 0 / 0.78);
    --glass-strong: oklch(1 0 0 / 0.9);
    --glass-blur: blur(12px) saturate(1.4);
    --glass-rim: oklch(1 0 0 / 0.92);
    --glass-edge: oklch(0.18 0.005 265 / 0.12);
    --glass-ink: oklch(0.18 0.005 265);
    --glass-shadow-lift: var(--shadow-lift);

    /* ── Fenêtre ── comme un navigateur : barre blanche, trois pastilles
       rouge, jaune, vert à gauche, l'adresse dans un champ gris au
       centre ; cadre tramé. */
    --light-close: oklch(0.7 0.19 27);
    --light-min: oklch(0.84 0.16 82);
    --light-max: oklch(0.76 0.18 145);
    --win-lights:
        radial-gradient(circle at 6px 50%, var(--light-close) 5px, color-mix(in oklch, var(--light-close), black 12%) 5.5px, oklch(0 0 0 / 0) 6px),
        radial-gradient(circle at 24px 50%, var(--light-min) 5px, color-mix(in oklch, var(--light-min), black 12%) 5.5px, oklch(0 0 0 / 0) 6px),
        radial-gradient(circle at 42px 50%, var(--light-max) 5px, color-mix(in oklch, var(--light-max), black 12%) 5.5px, oklch(0 0 0 / 0) 6px);
    --win-bg: oklch(1 0 0);
    --win-edge: var(--edge);
    --win-bar-h: 28px;
    --win-frame: 12px;
    --win-shadow: var(--relief), var(--shadow-object);
    --win-shadow-lift: var(--relief), var(--shadow-lift);
    --win-shadow-active: var(--relief), var(--shadow-lift);
    --screen-pad: 12px;

    /* ── Bulles ── question gris chaud, réponse de WAB en bleu. */
    --bubble-ask: var(--panel);

    /* ── La lumière de l’heure (os-sky.css) ── blanc froid, voile bleu. */
    --sky-top: oklch(1 0 0 / 0);
    --sky-glow: oklch(1 0 0 / 0);
    --sky-dawn: oklch(0.98 0.008 250 / 0.5);
    --sky-day: oklch(1 0 0 / 0.5);
    --sky-dusk: oklch(0.975 0.012 266 / 0.45);
    --sky-night: oklch(0.94 0.024 266 / 0.4);

    /* ── Barre, dock, calques (de bas en haut) ── */
    /* La pilule flotte à --bar-top du haut ; --bar-h est la place
       qu'elle prend, à réserver au-dessus du contenu. */
    --bar-top: 10px;
    --bar-row: 52px;
    --bar-h: calc(var(--bar-top) + var(--bar-row));
    --dock-space: 96px;
    --z-dock: 180;
    --z-bar: 190;
    --z-menu: 210;
    --z-toast: 220;

    /* ── Typo ── Instrument Sans ; Sligoil en signature (fichiers,
       codes, étiquettes, heure, terminal). Interlettrage optique :
       −0,02 em à 16 px, −0,034 em à 36 px, −0,04 em à 80 px. */
    --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-medium: 500;
    --w-strong: 600;
    --t-cap: 0.75rem;
    --t-small: 0.875rem;
    --t-body: 1rem;
    --t-lede: clamp(1.05rem, 1.5vw, 1.25rem);
    --t-title: clamp(1.75rem, 3.4vw, 2.5rem);
    --track-optical: calc(0.4px - 0.045em);
    --track-caps: 0.06em;

    --gutter: clamp(16px, 4vw, 40px);
    --section: clamp(80px, 9vw, 128px);
    --measure: 1120px;

    --veil: oklch(1 0 0 / 0.92);
    --scrim: oklch(0.18 0.005 265 / 0.32);

    /* ── Terminal ── surface sombre : elle redéfinit sa gamme. */
    --term-bg: oklch(0.17 0.012 266);
    --term-ink: oklch(0.95 0.005 266);
    --term-muted: oklch(0.74 0.015 266);

    /* ── Mouvement ── trois durées : retour, état, déplacement. */
    --dur-1: 150ms;
    --dur-2: 250ms;
    --dur-3: 400ms;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-spring: linear(0, 0.2 6%, 0.56 14%, 0.86 23%, 1.01 32%, 1.03 40%, 1.01 54%, 0.998 70%, 1);

    background: var(--desk);
    color: var(--ink);
}

/* ── Dérivés de la teinte ── tout ce qui se calcule à partir de la
   gamme --klein-* : redéclaré sur chaque [data-tint] (os-tints.css),
   pour qu'un bloc vert ait ses touches, ses écrans, ses fenêtres et
   ses bulles verts sans qu'aucun composant ne le sache. */
.os,
:root:has(body.os),
[data-tint] {
    --accent: var(--klein);
    --on-accent: var(--on-klein);
    --mark: var(--klein);
    --scan-lines: repeating-linear-gradient(0deg, color-mix(in oklch, var(--klein-deep) 30%, transparent) 0 1px, oklch(0 0 0 / 0) 1px 3px);
    --scan-depth:
        radial-gradient(closest-side, oklch(0 0 0 / 0) 55%, color-mix(in oklch, var(--klein-deep) 40%, transparent)),
        linear-gradient(90deg, color-mix(in oklch, var(--klein-deep) 34%, transparent), oklch(0 0 0 / 0) 16% 84%, color-mix(in oklch, var(--klein-deep) 34%, transparent));
    --scan-glow: radial-gradient(60% 55% at 50% 42%, color-mix(in oklch, var(--klein-hi) 85%, transparent), oklch(0 0 0 / 0) 72%);
    --klein-screen: var(--scan-lines), var(--scan-depth), var(--scan-glow), var(--klein);
    /* Sans vignette : écran étroit autour d'une fenêtre. */
    --klein-screen-flat: var(--scan-lines), radial-gradient(80% 70% at 30% 20%, color-mix(in oklch, var(--klein-hi) 55%, transparent), oklch(0 0 0 / 0) 70%), var(--klein);
    --key-klein: linear-gradient(180deg, color-mix(in oklch, var(--klein-hi) 45%, var(--klein)), var(--klein) 60%);
    --key-klein-edge: var(--klein-deep);
    --key-klein-relief: inset 0 1px 0 oklch(1 0 0 / 0.34), inset 0 -2px 0 color-mix(in oklch, var(--klein-deep) 22%, transparent), 0 1px 2px oklch(0.18 0.005 265 / 0.24), 0 3px 8px color-mix(in oklch, var(--klein) 22%, transparent);
    --win-bar: var(--paper);
    --win-bar-ink: var(--ink-muted);
    --win-frame-color: var(--klein-ink);
    --win-frame-dither: var(--klein-hi);
    --bubble-reply: var(--klein);
    --bubble-reply-ink: var(--on-klein);
    --bubble-reply-edge: var(--klein-deep);
    --term-accent: var(--klein-soft);
}

/* ── Surface Klein ── un bloc bleu (premier écran, pied de page,
   écrans) redéfinit la gamme pour lui et ses enfants : aucun
   composant n'a besoin de connaître son fond. Texte blanc 8,5:1,
   gris clair (blanc à 80 %) 5,9:1. */
.on-klein {
    --ink: var(--on-klein);
    --ink-muted: color-mix(in oklch, var(--on-klein) 80%, transparent);
    --ink-faint: color-mix(in oklch, var(--on-klein) 80%, transparent);
    --line: color-mix(in oklch, var(--on-klein) 18%, transparent);
    --line-strong: color-mix(in oklch, var(--on-klein) 36%, transparent);
    --accent: var(--on-klein);
    --klein-text: var(--on-klein);
    --on-accent: var(--klein-pair);
    --mark: var(--on-klein);
    --hover-tint: color-mix(in oklch, var(--on-klein) 10%, transparent);
    /* Réponse de WAB : blanche, écrite dans la teinte foncée. */
    --bubble-reply: var(--paper);
    --bubble-reply-ink: var(--klein-pair);
    --bubble-reply-edge: oklch(1 0 0 / 0.6);
    color: var(--ink);
}