/* ============================================================
   base.css — design tokens + reset
   Dark futuristic industrial theme.
   Palette is calibrated to the Expected Dashboard mockup.
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-0: #060b16;          /* deepest (body) */
  --bg-1: #0a1120;          /* slightly raised */
  --bg-2: #0f1729;          /* panel surface */
  --bg-3: #131c33;          /* hover / accent surface */
  --bg-log: #050a14;        /* terminal background */

  /* Borders / dividers */
  --border-1: #1c2742;
  --border-2: #243358;
  --border-soft: rgba(255, 255, 255, 0.04);

  /* Text */
  --text-1: #e6ebf5;        /* primary headings & strong values */
  --text-2: #b3becf;        /* body */
  --text-3: #7c8aa4;        /* muted labels */
  --text-4: #5a6680;        /* very muted */

  /* Accent colors used per panel + status */
  --accent-cyan:   #06b6d4;
  --accent-cyan-dim: rgba(6, 182, 212, 0.12);
  --accent-blue:   #3b82f6;
  --accent-blue-dim: rgba(59, 130, 246, 0.12);
  --accent-violet: #a855f7;
  --accent-violet-dim: rgba(168, 85, 247, 0.12);
  --accent-amber:  #fbbf24;
  --accent-amber-dim: rgba(251, 191, 36, 0.12);
  --accent-green:  #22c55e;
  --accent-green-dim: rgba(34, 197, 94, 0.12);
  --accent-red:    #ef4444;
  --accent-red-dim: rgba(239, 68, 68, 0.12);

  /* Effects */
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.02) inset,
                  0 4px 16px rgba(0, 0, 0, 0.35);
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 14px;

  /* GH #300 follow-up: compatibility aliases. A number of rules across
     pages.css (modal inputs, DB Maintenance stat tiles, Reader Management
     forms, multi-reader panels, ~90 call sites total) reference
     --border/--text/--text-muted/--bg-panel directly, but only the
     suffixed tokens above (--border-1, --text-1/3, --bg-2, ...) were ever
     defined in this file or in themes.css. With no fallback value at the
     call site, an undefined custom property computes to its property's
     initial value (e.g. border-style "none", so a "1px solid var(--border)"
     border silently renders with zero width) rather than to any color —
     the New Role/New User dialog's unstyled textboxes were one visible
     symptom of this. Aliasing here (rather than rewriting every call site)
     keeps every theme override in themes.css working unchanged, since a
     custom property resolves to whatever value is active on the element
     at compute time, not at declaration time. */
  --border: var(--border-1);
  --text: var(--text-1);
  --text-muted: var(--text-3);
  --bg-panel: var(--bg-2);

  /* Layout */
  --sidebar-w: 230px;
  --header-h: 76px;
  /* GH #320: single source of truth for the sidebar brand row, so the
     desktop .sidebar-toggle (a position:fixed sibling that can't inherit
     the row's flex box) computes its size/position FROM these instead of
     a hand-copied pixel guess that silently drifts whenever the logo size
     or row padding changes (this happened twice already: round 308 and
     round 315 each patched one hardcoded number, and the fixed .brand-logo
     width used elsewhere in this file kept drifting out from under it). */
  --brand-logo-size: 44px;
  --sidebar-brand-pad-y: 14px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Motion */
  --t-fast: 120ms;
  --t-med:  220ms;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* Body */
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
  background: var(--bg-0);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(6,182,212,0.05), transparent 60%);
  /* #253: the body used to be the page's only scroll container (min-height:
     100vh, letting it grow past the viewport) -- that dragged .app-header and
     .app-footer out of view along with the content. The body is now pinned to
     exactly one viewport (height, not min-height) and never scrolls itself;
     .app-main (see layout.css) is the single scrolling region inside the
     fixed-height .app-frame, so header/footer stay in place while only the
     page content scrolls. */
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbars (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 6px;
  border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: #2e3f6b; }

/* Selection */
::selection { background: rgba(6,182,212,0.25); color: var(--text-1); }

/* Visually hidden helper */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Utility text colors used across components */
.txt-1 { color: var(--text-1); }
.txt-2 { color: var(--text-2); }
.txt-3 { color: var(--text-3); }
.txt-success { color: var(--accent-green); }
.txt-warn    { color: var(--accent-amber); }
.txt-error   { color: var(--accent-red); }
.txt-info    { color: var(--accent-cyan); }
.mono        { font-family: var(--font-mono); }