/* =====================================================================
 * Wiki design tokens v2 — dark-mode-first, AA palette, single source of truth.
 *
 * 2026-06-12: palette aligned to Agent's design language (charcoal #121212,
 * Motlogs orange #FF5432 accent, Inter) per the UI Uplift v1 spec — but every
 * value here is authored fresh in Wiki, NOT imported from Agent
 * (05_frontend.md hard rule 1). Dark is THE default regardless of OS
 * preference (user decision 2026-06-12, matching Agent); light renders only
 * via the explicit `.theme-light` class set by the ☀/🌙 toggle. AA
 * contrast minimum on every pair; AAA on body text where the palette allows.
 * Unlike Agent we never put white text on #ff5432 (3.2:1 fails AA) — primary
 * buttons are --wk-orange background + --wk-orange-ink dark text (5.9:1).
 *
 * Token namespace: `--wk-*` so a future audit grep can spot any drift from
 * Agent's token namespace at a glance.
 * ===================================================================== */

@font-face {
    font-family: "InterVariable";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Surfaces */
    --wk-bg:          #121212;
    --wk-surface-1:   #1e1e1e;
    --wk-surface-2:   #2a2a2a;
    --wk-overlay:     rgba(0, 0, 0, 0.7);

    /* Ink (text) */
    --wk-ink:         #f5f5f5;   /* AAA on --wk-bg */
    --wk-ink-muted:   #a0a0a0;   /* AA on --wk-bg */
    --wk-ink-strong:  #ffffff;

    /* Accent — Motlogs orange on charcoal (5.9:1 — AA). --wk-orange is the
       dedicated primary-button pair (orange bg + dark ink); --wk-accent is the
       general interactive accent (links, focus, active nav). */
    --wk-orange:      #ff5432;
    --wk-orange-ink:  #1a0a05;
    --wk-accent:      #ff5432;
    --wk-accent-ink:  #1a0a05;
    --wk-accent-hover: #ff7a5e;
    --wk-accent-tint: rgba(255, 84, 50, 0.10);

    /* Status colours — every pair AA-checked against --wk-surface-1 */
    --wk-ok:          #3fb950;   /* Safe / green badge */
    --wk-ok-ink:      #0b1f10;
    --wk-warn:        #f5a623;   /* Caution / amber badge */
    --wk-warn-ink:    #1f1503;
    --wk-danger:      #ff5e5e;   /* Locked / red badge, also error state */
    --wk-danger-ink:  #2a0808;

    /* Borders, focus, glow, shadow */
    --wk-border:      #2e2e2e;
    --wk-border-soft: #232323;
    --wk-focus-ring:  0 0 0 2px var(--wk-bg), 0 0 0 4px var(--wk-accent);
    --wk-glow-ok:     0 0 6px var(--wk-ok);
    --wk-glow-danger: 0 0 6px var(--wk-danger);
    --wk-shadow-1:    0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    --wk-shadow-2:    0 8px 24px rgba(0, 0, 0, 0.5);

    /* Geometry */
    --wk-radius-sm:   4px;
    --wk-radius:      8px;
    --wk-radius-lg:   12px;
    --wk-hit:         44px;      /* Mobile hit-target minimum (05_frontend.md hard rule 3) */
    --wk-nav-w:       240px;     /* Side-nav width */
    --wk-maxw:        80rem;

    /* Type */
    --wk-font:        "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wk-font-mono:   ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
    --wk-fs-xs:       0.8rem;
    --wk-fs-sm:       0.9rem;
    --wk-fs:          1rem;
    --wk-fs-lg:       1.15rem;
    --wk-fs-h1:       clamp(1.6rem, 4vw, 2rem);
    --wk-fs-h2:       1.3rem;
    --wk-fs-h3:       1.1rem;
}

/* Light theme — ONLY via the explicit .theme-light class (☀/🌙 toggle,
   persisted in localStorage 'wiki.theme'). The former prefers-color-scheme
   block was removed 2026-06-12: portals default dark like Agent. */
:root.theme-light {
    --wk-bg:          #f9fafb;
    --wk-surface-1:   #ffffff;
    --wk-surface-2:   #f1f3f5;
    --wk-overlay:     rgba(255, 255, 255, 0.85);
    --wk-ink:         #1a1a1a;
    --wk-ink-muted:   #525252;
    --wk-ink-strong:  #000000;
    --wk-accent:      #cc3415;   /* 5.2:1 on white — AA */
    --wk-accent-ink:  #ffffff;
    --wk-accent-hover: #a82a10;
    --wk-accent-tint: rgba(204, 52, 21, 0.08);
    --wk-ok:          #1a7f37;
    --wk-warn:        #9a6700;
    --wk-danger:      #cf222e;
    --wk-border:      #d0d7de;
    --wk-border-soft: #e1e4e8;
    --wk-focus-ring:  0 0 0 2px #f9fafb, 0 0 0 4px var(--wk-accent);
    --wk-glow-ok:     0 0 6px var(--wk-ok);
    --wk-glow-danger: 0 0 6px var(--wk-danger);
    --wk-shadow-1:    0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06);
    --wk-shadow-2:    0 8px 24px rgba(0, 0, 0, 0.18);
}