/*
 * FILE: /home/pacifi13/VRHubMan/public/assets/vrhubman-theme.css
 * PROJECT: VRHubMan
 * VERSION: v0.2.339
 * DATE: 2026-08-19
 *
 * PURPOSE:
 * Shared design system for the redesigned VRHubMan visual language: color
 * tokens (dark by default, following prefers-color-scheme for light),
 * typography, and the small set of components proven across index.php,
 * login.php, and dashboard.php. Pages link this file instead of carrying
 * their own copy of :root.
 *
 * USAGE:
 * <link rel="stylesheet" href="/assets/vrhubman-theme.css?v=0.2.339">
 * Load it before any page-local <style> block so page-local rules can
 * still override where a page genuinely needs to.
 *
 * WHY .vrh-primary-navigation IS STYLED HERE, NOT IN PrimaryNavigation.php:
 * app/Views/PrimaryNavigation.php renders every link with a hardcoded
 * inline style="" (light-theme hex values) and is shared by every
 * authenticated page, including ones not yet migrated to this system.
 * Rewriting it to use these tokens would break it on every page that
 * doesn't link this stylesheet yet. Overriding it here with !important
 * (the only way to beat inline style="" from an external stylesheet) means
 * any page can opt in just by adding the <link> — no flag-day migration
 * required. Once every authenticated page links this file, it would be
 * safe to rewrite PrimaryNavigation.php to use these tokens directly and
 * delete this override block — not done yet because that day isn't here.
 *
 * CHANGELOG:
 * - v0.2.339 — Adds a legacy compatibility bridge (--bg/--panel/--ink/--muted/
 *   --line/--blue/--blue-2/--blue-soft/--ok-bg/--ok-ink/--warn-bg/--warn-ink/
 *   --bad-bg/--bad-ink/--neutral-bg/--neutral-ink/--purple-bg/--purple-ink)
 *   mapping the org/admin pages' existing token vocabulary onto the new
 *   palette, so large data-tool pages (hubs.php at 2,324 lines, locks.php at
 *   2,706, etc.) can adopt the new look by deleting their local :root rather
 *   than needing every table/filter/badge rule hand-edited.
 * - v0.2.336 — Initial extraction from index.php/login.php/dashboard.php's
 *   three independent, slightly-drifted copies of the same token set into
 *   one shared file. Reconciles naming (index.php's --text/--muted/--line/
 *   --verify/--alert/--panel/--shadow-dark all become the canonical
 *   --ondark/--ondark-muted/--line-ondark/--ok/--bad/--ink-850/--shadow
 *   dashboard.php had already settled on) and gives index.php/login.php
 *   prefers-color-scheme light support they didn't have before.
 */

:root {
    --ink-950:#12151b; --ink-850:#1b2029; --ink-750:#262d3a;
    --paper:#eef0f4;
    --line-ondark:rgba(238,240,244,.14);
    --ondark:#eef0f4; --ondark-muted:#9aa2b3;
    --brass:#a97b3f; --brass-dark:#8a622f; --brass-light:#e7c893; --brass-wash:#f7ede0;
    --ok:#2f9e6e; --ok-soft:rgba(47,158,110,.14); --ok-border:rgba(47,158,110,.35);
    --warn:#cf9f3a; --warn-soft:rgba(207,159,58,.14); --warn-border:rgba(207,159,58,.35);
    --bad:#bd5730; --bad-soft:rgba(189,87,48,.14); --bad-border:rgba(189,87,48,.35);
    --role-accent:#b39ae0; --role-soft:rgba(179,154,224,.16); --role-border:rgba(179,154,224,.35);
    --lock-accent:#7fa6d6; --lock-soft:rgba(127,166,214,.16); --lock-border:rgba(127,166,214,.35);
    --hub-accent:#5fb8c9; --hub-soft:rgba(95,184,201,.16); --hub-border:rgba(95,184,201,.35);
    --shadow:0 16px 36px rgba(0,0,0,.30);
    --hover-wash:rgba(238,240,244,.07);
    --serif:"Fraunces",Georgia,serif;
    --sans:"IBM Plex Sans",Arial,sans-serif;
    --mono:"IBM Plex Mono",Consolas,monospace;
    /* Logo tile only — stays a fixed dark badge in both themes, like a printed logo would. */
    --logo-ink:#12151b; --logo-accent:#e7c893;
    /* Built from tokens above, not literals — theme-flips for free, no light-mode redefinition needed. */
    --password-toggle-color: var(--ondark-muted);
    --password-toggle-hover: var(--hover-wash);
    --password-toggle-hover-color: var(--brass-light);
    --password-toggle-focus: var(--brass);

    /* Legacy compatibility bridge: the ~25 org/admin pages not yet given a
       full bespoke redesign were built against this exact token vocabulary
       (two slightly-different variants existed: hubs.php's --ok/--warn/
       --bad-style names, and locks.php's --ok-bg/--ok-ink-style names — both
       bridged here). A page adopts the new look just by deleting its own
       local :root (which otherwise shadows this one) and linking this file
       — no per-rule editing of its table/filter/badge CSS required. Do not
       add new rules against these names; they exist only for old pages to
       fall onto, not to write against going forward. */
    --bg: var(--ink-950); --panel: var(--ink-850); --ink: var(--ondark); --muted: var(--ondark-muted); --line: var(--line-ondark);
    --blue: var(--brass); --blue-2: var(--brass-light); --blue-soft: rgba(169,123,63,.14);
    --ok-bg: var(--ok-soft); --ok-ink: var(--ok);
    --warn-bg: var(--warn-soft); --warn-ink: var(--warn);
    --bad-bg: var(--bad-soft); --bad-ink: var(--bad);
    --neutral-bg: var(--ink-750); --neutral-ink: var(--ondark-muted);
    --purple-bg: var(--role-soft); --purple-ink: var(--role-accent);
}
@media (prefers-color-scheme: light) {
    :root {
        --ink-950:#eef1f5; --ink-850:#ffffff; --ink-750:#f1f3f7;
        --paper:#ffffff;
        --line-ondark:#dde2ea;
        --ondark:#1b2029; --ondark-muted:#5b6576;
        --brass:#a97b3f; --brass-dark:#8a622f; --brass-light:#8a622f; --brass-wash:#f7ede0;
        --ok:#1f8a5c; --ok-soft:rgba(31,138,92,.10); --ok-border:rgba(31,138,92,.30);
        --warn:#a97a1e; --warn-soft:rgba(169,122,30,.10); --warn-border:rgba(169,122,30,.30);
        --bad:#a8481f; --bad-soft:rgba(168,72,31,.10); --bad-border:rgba(168,72,31,.30);
        --role-accent:#7c5bb0; --role-soft:rgba(124,91,176,.10); --role-border:rgba(124,91,176,.30);
        --lock-accent:#3f6fa8; --lock-soft:rgba(63,111,168,.10); --lock-border:rgba(63,111,168,.30);
        --hub-accent:#2b7d8c; --hub-soft:rgba(43,125,140,.10); --hub-border:rgba(43,125,140,.30);
        --shadow:0 10px 26px rgba(23,32,51,.08);
        --hover-wash:rgba(27,32,41,.06);
    }
}

* { box-sizing:border-box; }
body { background:var(--ink-950); color:var(--ondark); font-family:var(--sans); }
h1,h2,h3 { font-family:var(--serif); font-weight:650; margin:0; text-wrap:balance; }
a { color:inherit; }

.eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brass); flex:none; }

/* ---------- buttons ---------- */
.btn { border:1px solid transparent; border-radius:9px; padding:11px 18px; font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap; transition:transform .15s ease, background .15s ease, border-color .15s ease; }
.btn-primary { background:var(--brass); color:var(--ink-950); }
.btn-primary:hover { background:var(--brass-light); transform:translateY(-1px); }
.btn-ghost-light { background:transparent; border-color:var(--line-ondark); color:var(--ondark); }
.btn-ghost-light:hover { border-color:var(--brass-dark); background:var(--ink-850); }
.btn-ghost-dark { background:transparent; border-color:var(--line-ondark); color:var(--ondark); }
.btn-ghost-dark:hover { border-color:var(--brass-light); background:var(--hover-wash); }

/* ---------- role/status chip ---------- */
.chip { display:inline-block; border-radius:999px; padding:5px 12px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; font-weight:600; background:var(--ink-750); color:var(--ondark-muted); white-space:nowrap; border:1px solid var(--line-ondark); }
.chip.security { background:var(--role-soft); color:var(--role-accent); border-color:var(--role-border); }

/* ---------- brand mark ---------- */
/* Uses the theme-invariant --logo-ink/--logo-accent tokens, not --ink-950/
   --brass-light directly — those two flip per theme, which would turn the
   logo tile white-on-pale in light mode. The mark itself shouldn't re-theme,
   same as a printed logo wouldn't. */
.brand-mark { border-radius:12px; background:var(--logo-ink); color:var(--logo-accent); display:flex; align-items:center; justify-content:center; flex:none; }

/* ---------- shared primary navigation override ---------- */
/* See the file-header comment for why this exists instead of a source-level
   fix to PrimaryNavigation.php. */
.vrh-primary-navigation a { color:var(--ondark-muted) !important; background:transparent !important; border-color:transparent !important; font-family:var(--sans) !important; font-weight:600 !important; transition:background .15s ease, color .15s ease; }
.vrh-primary-navigation a:hover { color:var(--ondark) !important; background:var(--hover-wash) !important; }
.vrh-primary-navigation a[aria-current="page"] { color:var(--brass-light) !important; background:rgba(169,123,63,.14) !important; border-color:rgba(169,123,63,.4) !important; }