/* =====================================================================
 * 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 `data-theme="light"` attribute set by the ☀️/🌙 toggle. AA
 * contrast minimum on every pair; AAA on body text where the palette allows.
 *
 * 2026-07-02: One-MOTLogs brand spec v1 — the canonical `--ml-*` family
 * tokens are defined here (duplicated per repo per the ISOLATION RULE, never
 * shared) and the existing `--wk-*` names are repointed at them so every
 * selector keeps working. Status colours updated to the family palette and
 * `--wk-info` added. Primary buttons follow the family spec: accent
 * background + WHITE ink in both themes (dark hover #FF7A5E; light accent is
 * the deeper #CC3415, 5.2:1 with white). Focus is the family soft glow
 * (accent border + 3px accent-tint ring) replacing the old double-ring.
 * Theme switching moved from the `.theme-light` class to the
 * `data-theme="light"` attribute + localStorage key `motlogs.theme`.
 *
 * 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 {
    /* Canonical One-MOTLogs family tokens (brand spec v1, dark theme).
       Local copy — never fetched or shared across repos. */
    --ml-bg:             #121212;
    --ml-surface-1:      #1E1E1E;
    --ml-surface-2:      #242424;
    --ml-surface-3:      #2A2A2A;
    --ml-accent:         #FF5432;
    --ml-accent-hover:   #FF7A5E;
    --ml-accent-glow:    rgba(255, 84, 50, 0.15);
    --ml-text:           #FFFFFF;
    --ml-text-secondary: #A0A0A0;
    --ml-text-muted:     #707070;
    --ml-border:         rgba(255, 255, 255, 0.08);
    --ml-border-strong:  rgba(255, 255, 255, 0.15);
    --ml-success:        #26B050;
    --ml-warning:        #F39C12;
    --ml-error:          #E74C3C;
    --ml-info:           #3B82F6;

    /* Surfaces — full family elevation ramp (bg → 1 → 2 → 3). */
    --wk-bg:          var(--ml-bg);
    --wk-surface-1:   var(--ml-surface-1);
    --wk-surface-2:   var(--ml-surface-2);
    --wk-surface-3:   var(--ml-surface-3);
    --wk-overlay:     rgba(0, 0, 0, 0.7);

    /* Ink (text) */
    --wk-ink:         var(--ml-text);
    --wk-ink-muted:   var(--ml-text-secondary);   /* AA on --wk-bg */
    --wk-ink-strong:  var(--ml-text);

    /* Accent — MOTLogs orange on charcoal. --wk-orange is the dedicated
       primary-button pair (family spec: accent bg + WHITE ink in both themes);
       --wk-accent is the general interactive accent (links, focus, active nav). */
    --wk-orange:      var(--ml-accent);
    --wk-orange-ink:  #FFFFFF;
    --wk-accent:      var(--ml-accent);
    --wk-accent-ink:  #FFFFFF;
    --wk-accent-hover: var(--ml-accent-hover);
    --wk-accent-tint: var(--ml-accent-glow);

    /* Status colours — every pair AA-checked against --wk-surface-1 */
    --wk-ok:          var(--ml-success);   /* Safe / green badge */
    --wk-ok-ink:      #0b1f10;
    --wk-warn:        var(--ml-warning);   /* Caution / amber badge */
    --wk-warn-ink:    #1f1503;
    --wk-danger:      var(--ml-error);     /* Locked / red badge, also error state */
    --wk-danger-ink:  #2a0808;
    --wk-info:        var(--ml-info);      /* Informational badge / notice */
    --wk-info-ink:    #071a33;

    /* Borders, focus, glow, shadow. Focus is the family soft glow — pair it
       with border-color: var(--wk-accent) on elements that have a border. */
    --wk-border:      var(--ml-border);
    --wk-border-soft: #232323;
    --wk-focus-ring:  0 0 0 3px var(--wk-accent-tint);
    --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 — family radius scale: buttons/inputs/chips 8px, cards/tiles/
       dialogs/toasts 12px (matches Agent's feel; -sm revalued 4→8 2026-07-02). */
    --wk-radius-sm:   8px;
    --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 data-theme="light" attribute on <html>
   (☀️/🌙 toggle, persisted in localStorage 'motlogs.theme' + a cookie mirror on
   .motlogs.com — see js/theme.js). The former prefers-color-scheme block was
   removed 2026-06-12: portals default dark like Agent. */
html[data-theme="light"] {
    /* Canonical One-MOTLogs family tokens (brand spec v1, light theme). */
    --ml-bg:             #F9FAFB;
    --ml-surface-1:      #FFFFFF;
    --ml-surface-2:      #F1F3F5;
    --ml-surface-3:      #F1F3F5;
    --ml-accent:         #CC3415;   /* 5.2:1 on white — AA */
    --ml-accent-hover:   #A82A10;
    --ml-accent-glow:    rgba(204, 52, 21, 0.10);
    --ml-text:           #1A1A1A;
    --ml-text-secondary: #525252;
    --ml-text-muted:     #8B8B8B;
    --ml-border:         rgba(0, 0, 0, 0.08);
    --ml-border-strong:  rgba(0, 0, 0, 0.15);
    --ml-success:        #1D8A3D;
    --ml-warning:        #C77A0D;
    --ml-error:          #C0392B;
    --ml-info:           #2563EB;

    --wk-overlay:     rgba(255, 255, 255, 0.85);
    /* Light status colours are dark enough to carry white ink; the amber pair
       keeps its dark ink (5.3:1 on #C77A0D — white would fail AA). Accent ink
       stays white — light accent #CC3415 is 5.2:1 with white (AA). */
    --wk-ok-ink:      #ffffff;
    --wk-danger-ink:  #ffffff;
    --wk-info-ink:    #ffffff;
    --wk-border-soft: #e1e4e8;
    /* --wk-focus-ring needs no light override: it reads --wk-accent-tint,
       which the --ml-accent-glow remap above already flips. */
    --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);
}

/* =====================================================================
 * team.help palette axis (plan §3.3b) — PURELY ADDITIVE, gated behind
 * [data-palette]. MOTLogs sets NO data-palette attribute, ever, so none of
 * the blocks below can ever match a MOTLogs surface — the :root{…} and
 * html[data-theme="light"]{…} blocks above remain the sole source of truth
 * for MOTLogs and are intentionally left byte-untouched.
 *
 * team.help selects a second brand purely by data — data-palette="harbor|
 * evergreen|indigo|damson" × data-theme (dark default / "light"). The neutral
 * skeleton (bg, surfaces, borders, radii, type, status colours) is
 * DELIBERATELY inherited unchanged from the :root block above — identical to
 * MOTLogs — so the palette axis swaps ONLY the accent triplet
 * (--ml-accent / --ml-accent-hover / --ml-accent-glow) plus the brand-level
 * WCAG fixes below. Glow = the accent as rgba at 0.15 (dark) / 0.10 (light).
 * ===================================================================== */

/* Brand-level WCAG fixes — apply to ALL four team.help palettes (any
   data-palette value matches); MOTLogs never matches. */
:root[data-palette] {
    --ml-text-muted:  #949494;   /* team.help dark muted (MOTLogs keeps #707070) */
    --ml-reading:     #D6D6D6;    /* long-form dark reading text */
    --wk-orange-ink:  #121212;    /* dark buttons: dark ink on accent */
    --wk-accent-ink:  #121212;
}
html[data-theme="light"][data-palette] {
    --ml-text-muted:  #6B6B6B;
    --wk-orange-ink:  #FFFFFF;
    --wk-accent-ink:  #FFFFFF;
}

/* Per-palette accent triplets — override ONLY the accent trio. */
/* harbor */
:root[data-palette="harbor"] {
    --ml-accent:       #4C8DFF;
    --ml-accent-hover: #7AAEFF;
    --ml-accent-glow:  rgba(76, 141, 255, 0.15);
}
html[data-theme="light"][data-palette="harbor"] {
    --ml-accent:       #1D4ED8;
    --ml-accent-hover: #1E40AF;
    --ml-accent-glow:  rgba(29, 78, 216, 0.10);
}
/* evergreen */
:root[data-palette="evergreen"] {
    --ml-accent:       #14B8A6;
    --ml-accent-hover: #2DD4BF;
    --ml-accent-glow:  rgba(20, 184, 166, 0.15);
}
html[data-theme="light"][data-palette="evergreen"] {
    --ml-accent:       #0F766E;
    --ml-accent-hover: #115E59;
    --ml-accent-glow:  rgba(15, 118, 110, 0.10);
}
/* indigo */
:root[data-palette="indigo"] {
    --ml-accent:       #818CF8;
    --ml-accent-hover: #A5B4FC;
    --ml-accent-glow:  rgba(129, 140, 248, 0.15);
}
html[data-theme="light"][data-palette="indigo"] {
    --ml-accent:       #4F46E5;
    --ml-accent-hover: #4338CA;
    --ml-accent-glow:  rgba(79, 70, 229, 0.10);
}
/* damson */
:root[data-palette="damson"] {
    --ml-accent:       #E879F9;
    --ml-accent-hover: #F0ABFC;
    --ml-accent-glow:  rgba(232, 121, 249, 0.15);
}
html[data-theme="light"][data-palette="damson"] {
    --ml-accent:       #86198F;
    --ml-accent-hover: #701A75;
    --ml-accent-glow:  rgba(134, 25, 143, 0.10);
}