/* Garnet Ledger — shared operator shell (UI unification spec, P1).
   One implementation of the chrome the four saas apps used to hand-copy: the
   variable layer (re-sourced from the canonical token package, so dark mode
   flows for free), the topbar, sign-in card, tab rail, toast, pills, glass,
   and a mobile bottom nav. Apps link gl-tokens.css then this file, then keep
   only their DOMAIN styles and app-unique role colors (Canon §2.3). */

@import url("gl-tokens.css");

/* ── The variable layer — the apps' local names, now sourced from canon tokens.
   This is the token adoption: every brand/semantic/surface/text/geometry value
   originates from --gl-*; the apps' existing rules keep working unchanged, and
   dark mode is automatic because the tokens flip under [data-theme]/media. ── */
:root {
  --ink: var(--gl-text);
  --muted: var(--gl-text-muted);
  --faint: var(--gl-text-faint);
  --line: var(--gl-border);
  --line2: var(--gl-border-2);
  --garnet: var(--gl-brand-accent);
  --garnet-d: var(--gl-brand);
  --garnet-sf: var(--gl-brand-soft, rgba(163,27,65,.10));
  --accent: var(--gl-info);   --info: var(--gl-info);
  --accent-d: var(--gl-info); --info-sf: var(--gl-info-bg);
  --accent-sf: var(--gl-info-bg);
  --ok: var(--gl-healthy);    --ok-sf: var(--gl-healthy-bg);
  --warn: var(--gl-caution);  --warn-sf: var(--gl-caution-bg);  --warn-d: var(--gl-caution-on);
  --danger: var(--gl-risk);   --danger-sf: var(--gl-risk-bg);
  --ai: var(--gl-ai);         --ai-sf: var(--gl-ai-bg);  --violet: var(--gl-ai);
  --teal: #0d9488;            --gray: var(--gl-structure);
  --page: var(--gl-page);     --surface: var(--gl-surface);
  --r: 18px; --r-sm: 13px; --r-xs: 10px;
  --glass: var(--gl-surface); --gb: var(--gl-border);
  --sh: 0 1px 2px rgba(16,24,40,.05), 0 16px 34px -20px rgba(16,24,40,.30);
  --sh-lg: 0 1px 2px rgba(16,24,40,.05), 0 28px 50px -22px rgba(16,24,40,.40);
  --mono: var(--gl-mono);
  --font: var(--gl-font), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  /* brand gradient stops (derived from the brand tokens; the only place a
     brand ramp lives, so the checker sees tokens not literals) */
  --brand-grad: linear-gradient(150deg, var(--gl-brand-accent), var(--gl-brand));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: var(--gl-surface-2); --gb: var(--gl-border);
    --sh: 0 1px 2px rgba(0,0,0,.4), 0 16px 34px -20px rgba(0,0,0,.6);
    --sh-lg: 0 1px 2px rgba(0,0,0,.4), 0 28px 50px -22px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --glass: var(--gl-surface-2); --gb: var(--gl-border);
  --sh: 0 1px 2px rgba(0,0,0,.4), 0 16px 34px -20px rgba(0,0,0,.6);
  --sh-lg: 0 1px 2px rgba(0,0,0,.4), 0 28px 50px -22px rgba(0,0,0,.7);
}

/* Page ground follows the canonical page token in both themes (was a fixed
   light-only gradient per app). */
body.gl-app-body {
  font-family: var(--font); color: var(--ink); font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; margin: 0; min-height: 100%;
  background: var(--gl-page); background-attachment: fixed;
}

/* ── Shared chrome ───────────────────────────────────────────────────────── */
.gl-shield { background: var(--brand-grad); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 11px; }
.gl-uav { background: var(--brand-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 500; }

/* Mobile bottom nav — the shell.js mirrors the app's tab rail here.
   Kills the "tab rail vanishes under 860px with no replacement" dead end. */
.gl-mobilenav { display: none; }
@media (max-width: 860px) {
  .gl-mobilenav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: var(--gl-surface); border-top: 1px solid var(--gl-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px -14px rgba(16,24,40,.35);
  }
  .gl-mobilenav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; cursor: pointer; padding: 6px 2px;
    color: var(--gl-text-muted); font: 500 10.5px var(--font);
  }
  .gl-mobilenav button.on { color: var(--gl-brand-accent); }
  .gl-mobilenav button svg { width: 20px; height: 20px; }
  .gl-mobilenav-spacer { height: 62px; }
}