/**
 * tokens.css — Console design tokens
 *
 * Adopts the ARCHITECTURE of @sovereigns/ui-tokens (technology/packages/
 * ui-tokens/src/tokens.css) — CSS custom properties only, no resets, no
 * element-level styles — but re-themes every VALUE to the Console's own
 * identity: dark, serif-for-headings, one warm gold accent. See the header
 * comment in ../styles.css: "See the approved mockup for the full concept."
 * We are not adopting ui-tokens' default light-first indigo palette.
 *
 * This file is now the SINGLE SOURCE OF TRUTH for those values — the
 * bespoke names below (--ground, --gold, --ink, ...) used to live directly
 * in styles.css's own :root block; they've moved here so there is exactly
 * one place that defines them (ui-tokens' own README explains this was
 * the reason the shared package exists at all: three apps each drifting
 * their own copy of "the same" tokens). styles.css now assumes this file
 * loads first and keeps its layout/typography rules unchanged — see
 * README.md in this directory for load order.
 *
 * Two names for the same values, on purpose:
 *   - the bespoke names (--ground, --gold, --ink, ...) — what Console's
 *     existing CSS (styles.css) already uses everywhere. Untouched.
 *   - the canonical --color-*, --font-*, --radius-*, --shadow-* names — the
 *     naming CONVENTION shared with ui-tokens' other consumers (otc,
 *     funding, money/apps/trade), so component primitives (components.css)
 *     and future screens can be written in the platform's shared idiom.
 * Both resolve to the same value; pick whichever reads better in context.
 *
 * Console is dark-only by design (not "dark falls back from light" —
 * there IS no light variant). We still mirror ui-tokens' [data-theme]
 * structure at the bottom so a future shared shell component that sets
 * data-theme="dark" keeps working here without change, and so the shape
 * of this file stays recognizable to anyone coming from the other apps.
 */

:root {
    color-scheme: dark;

    /* ── Bespoke identity (sleek obsidian dark mode with gold & cyan accents) ── */
    --ground: #07090e;
    --surface: rgba(15, 19, 28, 0.75);
    --surface-raised: rgba(22, 28, 42, 0.85);
    --surface-glass: rgba(18, 24, 38, 0.60);
    /* The OPAQUE sibling of --surface-raised (same colour, alpha 1). Every
       surface above is translucent by design — that is the glass identity —
       but a panel that floats OVER scrolling content needs to actually
       occlude it. First needed by Jobs.elm's sticky stop/purge confirmation,
       where seeing job rows slide under a "stop this job?" panel is the
       precise ambiguity the panel exists to remove. Use this only for
       overlays; a card that sits IN the flow should stay translucent. */
    --surface-opaque: #161c2a;
    --line: rgba(255, 255, 255, 0.08);
    --gold: #d4af37;
    --gold-bright: #f3d068;
    --gold-dim: #997b24;
    --gold-glow: rgba(212, 175, 55, 0.20);
    /* A second, softer gold (#c9a24b) was scattered through this file and
       styles.css as an unnamed raw rgba() literal — genuinely inconsistent
       with --gold itself (a real UX-audit finding, "Palette", 2026-08-11:
       "the highest-leverage single edit... it's currently inconsistent
       inside tokens.css itself"). Named here as its own token instead of
       flattening it into --gold outright: the softer tone is real design
       intent (surface washes/hovers vs. the loud primary accent), it was
       just never given a name of its own. RGB triplet (not a hex or full
       rgba()) so callers can parameterize alpha: rgba(var(--gold-soft-rgb), 0.1). */
    --gold-soft-rgb: 201, 162, 75;
    --line-glow: rgba(var(--gold-soft-rgb), 0.25);
    --ink: #f7f9fc;
    --ink-muted: #94a3b8;
    --ink-faint: #64748b;
    --emerald: #10b981;
    --emerald-glow: rgba(16, 185, 129, 0.25);
    --red: #f43f5e;
    --red-glow: rgba(244, 63, 94, 0.25);
    --amber: #f59e0b;
    --cyan: #06b6d4;
    --cyan-glow: rgba(6, 182, 212, 0.25);

    --serif: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    /* ── Short aliases (NEW — a real UX-audit finding, "Palette",
       2026-08-11): styles.css reached for var(--muted), var(--accent) and
       var(--surface-subtle) in several places — shorter, more natural
       names than this file's own --ink-muted/--gold/--surface — and none
       of the three were ever defined, so every one of those declarations
       silently resolved to nothing (or a same-as-unstyled fallback, e.g.
       a hover border-color that fell through to the SAME value as the
       unhovered state — a literal no-op hover). The naming instinct was
       right; it just never got wired up. Aliased here instead of hunting
       down and rewriting every call site, since the instinct will keep
       recurring. */
    --muted: var(--ink-muted);
    --accent: var(--gold);
    --surface-subtle: var(--surface);

    /* ── Canonical aliases (ui-tokens naming convention) ──────────────
       Same values as above, named the way otc/funding/money-trade name
       theirs, so shared component vocabulary (components.css) and any
       future cross-app reuse reads consistently. */
    --color-canvas: var(--ground);
    --color-surface: var(--surface);
    --color-surface-elevated: var(--surface-raised);
    --color-surface-overlay: var(--surface-opaque);
    --color-surface-hover: rgba(var(--gold-soft-rgb), 0.06);

    --color-ink: var(--ink);
    --color-muted: var(--ink-muted);
    --color-muted-soft: var(--ink-faint);

    --color-border: var(--line);
    --color-border-soft: rgba(38, 44, 58, 0.55);
    --color-border-strong: rgba(139, 147, 163, 0.35);

    --color-accent: var(--gold);
    --color-accent-hover: var(--gold-bright);
    --color-accent-dim: var(--gold-dim);
    --color-accent-soft: rgba(var(--gold-soft-rgb), 0.1);

    --color-success: var(--emerald);
    --color-success-bg: rgba(63, 191, 143, 0.12);
    --color-warning: var(--amber);
    --color-warning-bg: rgba(224, 151, 63, 0.12);
    --color-danger: var(--red);
    --color-danger-bg: rgba(217, 105, 95, 0.1);
    /* No dedicated info hue — the palette deliberately has one accent
       color (gold). Informational chips/badges borrow the accent. */
    --color-info: var(--color-accent);
    --color-info-bg: var(--color-accent-soft);

    --font-serif: var(--serif);
    --font-sans: var(--sans);
    --font-mono: var(--mono);
    /* ui-tokens' base.css sets html/body via --font-display; Console's
       body copy is sans (serif is reserved for headings), so alias it. */
    --font-display: var(--sans);

    /* ── Type scale (NEW — ui-tokens has none; Console had bare rem
       literals scattered across styles.css). Named t-shirt sizes so
       new screens don't invent their own numbers. Values match what
       styles.css already uses today (0.9375rem body, 1.75rem h1, ...)
       so adopting the scale is a no-op for existing rules. ── */
    --text-xs: 0.6875rem;   /* 11px — tags, eyebrows, table headers */
    --text-sm: 0.8125rem;   /* 13px — secondary copy, captions */
    --text-base: 0.9375rem; /* 15px — body, buttons, inputs */
    --text-md: 1rem;        /* 16px */
    --text-lg: 1.125rem;    /* 18px — card titles */
    --text-xl: 1.375rem;    /* 22px — h2 */
    --text-2xl: 1.75rem;    /* 28px — h1 */
    --text-3xl: 2.25rem;    /* 36px — hero stats, big numbers */

    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* ── Spacing scale (NEW — same gap: ui-tokens has none). Base-4,
       matching the paddings already in use (8/10/12/14/16/24/28/48). ── */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */

    /* ── Shape ─────────────────────────────────────────────────────── */
    --radius-sm: 8px;
    --radius-card: 14px;
    --radius-lg: 16px;
    --radius-chip: 9999px;

    /* ── Layout ────────────────────────────────────────────────────── */
    /* ── iOS safe areas ──────────────────────────────────────────────
       Console ships as a Capacitor app in a WKWebView that draws edge to
       edge, so the OS status bar, the Dynamic Island and the home indicator
       sit ON TOP of the page unless the page reserves room for them.

       MEASURED 2026-09-06 on an iPhone, before this existed: .app-switcher-bar
       occupied y=0..53 and the "Agents" tab spanned y=13..39 — entirely inside
       the status bar, which owns y=0..47 (iPhone 14) or y=0..59 (Dynamic
       Island). The tab rendered underneath the clock and battery icons and
       could not be tapped. It was reported as "off screen"; it was underneath.

       These resolve to 0px unless index.html asks for the space with
       `viewport-fit=cover` — the meta tag and these tokens only work as a
       pair, so do not remove one without the other. They are plain custom
       properties so a test can override them (set --safe-top: 59px) and check
       the layout without a device. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* Height of .app-switcher-bar (row 1 of the desk shell's two sticky nav
       rows) — .app-nav (row 2) reads this same value for its own sticky `top`,
       so the two rows stack instead of overlapping on scroll. One number, in
       one place, instead of a magic offset duplicated in row 2.

       The status-bar inset is INSIDE this number on purpose: row 1 grows by
       the inset, and every consumer of this token (row 2's sticky top, the
       mesh pane's 100vh subtraction) then stays correct with no extra maths. */
    --nav-app-switcher-bar-h: 53px;
    --nav-app-switcher-h: calc(var(--nav-app-switcher-bar-h) + var(--safe-top));

    /* ── Elevation ─────────────────────────────────────────────────── */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.35);
    /* The accent glow already used on hover for .btn-primary — formalized
       so new components can reach for it instead of re-deriving it. */
    --shadow-glow-accent: 0 4px 20px -4px rgba(var(--gold-soft-rgb), 0.45);
}

/* Structural parity with ui-tokens' [data-theme] convention — see file
   header. Same values as :root above; kept here so a shared shell that
   stamps data-theme="dark" on <html> is a no-op for Console. */
[data-theme="dark"] {
    color-scheme: dark;
}