/* ============================================================
   Portal design tokens — PrimePortal
   ------------------------------------------------------------
   This is the only file you should need to edit to rebrand.
   Change a value here and it propagates everywhere.
   Load this BEFORE portal-components.css.

   2026-08-27: retargeted from the warm-grey/oxblood paper system
   onto PrimePortal, so /Admin and /Account match the Hub and the
   sign-in instead of being a second, unrelated-looking product.
   portal-components.css contains no hardcoded colors at all —
   every value it paints comes from this file — so the whole
   component set moved by editing these declarations and nothing
   else. The page markup was not touched.

   The palette is lifted from wwwroot/css/site.css, which styles
   the Hub and the auth surface:
     #070b16  page          #0c1322  panel
     #e2e8f0  body text     #38bdf8  sky accent
     #34d399  live/up       rgba(255,255,255,.08)  hairline

   SINGLE THEME
   The Hub and sign-in are dark-only by design, so this system is
   too — a light Admin behind a dark Hub is the exact mismatch
   this change set out to remove. There is no [data-portal-theme]
   block any more and the nav toggle has been dropped from the
   layouts. theme.js still stamps the attribute (it is loaded by
   other pages); nothing reads it here, so a stale saved
   preference of "light" is inert rather than broken.
   ============================================================ */

:root {
  color-scheme: dark;

  /* --- Surfaces -------------------------------------------- */
  /* Two planes, not one: PrimePortal lifts panels off the page
     with a lighter fill plus a hairline, the way a .door sits on
     the Hub. (The paper system did the opposite — one flat plane
     with rules doing the depth work.) */
  --portal-bg:             #070B16;  /* page */
  --portal-surface:        #0C1322;  /* cards, panels, thead */
  --portal-surface-sunken: #111A2C;  /* hover rows, disabled fields */

  /* --- Borders --------------------------------------------- */
  --portal-border:         rgba(255,255,255,.08);  /* hairline, as .door */
  --portal-border-strong:  rgba(255,255,255,.18);  /* input underlines */

  /* --- Text ------------------------------------------------ */
  --portal-text:           #E2E8F0;  /* body — site.css's body color */
  --portal-text-secondary: #CBD5E1;
  --portal-text-muted:     #94A3B8;  /* labels, metadata */
  --portal-text-subtle:    #78849B;  /* placeholders, idle states */
  --portal-text-inverse:   #06121F;  /* label on a sky-filled button */

  /* --- Accent: sky ------------------------------------------ */
  /* Links, the active tab rule, focus, selected state. The same
     #38bdf8 that draws the brand cloud and the "AI" gradient. */
  --portal-accent:         #38BDF8;
  --portal-accent-hover:   #7DD3FC;
  --portal-accent-bg:      rgba(56,189,248,.12);
  --portal-accent-text:    #7DD3FC;

  /* Solid buttons are SKY with dark ink. Inverted from the paper
     system, where the fill was ink and the label was paper —
     a dark fill on a dark page reads as a disabled control. */
  --portal-btn-fill:        #38BDF8;
  --portal-btn-fill-hover:  #7DD3FC;
  --portal-btn-label:       #06121F;

  /* --- Status: only ever used to mean a state -------------- */
  /* Greens/ambers/reds are the dark-surface variants; the paper
     system's muted sage and clay disappear against #070b16. */
  --portal-success:        #34D399;  /* matches the door's live pill */
  --portal-success-bg:     rgba(52,211,153,.12);
  --portal-success-text:   #6EE7B7;

  --portal-warning:        #FBBF24;
  --portal-warning-bg:     rgba(251,191,36,.12);
  --portal-warning-text:   #FCD34D;

  --portal-danger:         #F87171;
  --portal-danger-hover:   #FCA5A5;
  --portal-danger-bg:      rgba(248,113,113,.12);
  --portal-danger-text:    #FCA5A5;

  --portal-neutral-bg:     rgba(255,255,255,.06);
  --portal-neutral-text:   #CBD5E1;

  /* --- Typography ------------------------------------------ */
  /* One system sans, matching site.css's body stack. The serif
     token is kept as a NAME so the seven component rules that
     reference it keep resolving, but it now points at the same
     stack: PrimePortal headings are sans, and a Newsreader page
     title above a sans Hub was half the mismatch. Nothing loads
     from Google Fonts for these pages any more. */
  --portal-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
  --portal-font-serif: var(--portal-font);
  --portal-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --portal-text-xs:   12px;  /* labels, pills, captions */
  --portal-text-sm:   13px;  /* dense UI, table cells, buttons */
  --portal-text-base: 15px;  /* body copy */
  --portal-text-lg:   17px;  /* card / section headings */
  --portal-text-xl:   20px;  /* page title (sans contexts) */
  --portal-text-2xl:  24px;  /* rare - dashboard metrics */

  /* Display sizes (brand + page headings). */
  --portal-display-xl: 31px;  /* == .brand-word */
  --portal-display-lg: 25px;

  /* Sans headings need more weight than the serif did to hold
     the same presence, so medium steps up to 700. */
  --portal-weight-normal: 400;
  --portal-weight-medium: 700;

  --portal-leading-tight: 1.3;
  --portal-leading-body:  1.6;

  /* --- Spacing (4px base) ---------------------------------- */
  --portal-space-1:  4px;
  --portal-space-2:  8px;
  --portal-space-3:  12px;
  --portal-space-4:  16px;
  --portal-space-5:  20px;
  --portal-space-6:  24px;
  --portal-space-8:  32px;
  --portal-space-10: 40px;

  /* --- Shape ----------------------------------------------- */
  /* Rounded. The paper system was deliberately square (radius 0,
     "rules not boxes"); PrimePortal is the opposite — the doors
     are 18px and the controls follow. */
  --portal-radius:      10px;
  --portal-radius-lg:   16px;
  --portal-radius-full: 999px;

  /* --- Controls -------------------------------------------- */
  --portal-control-height:    36px;
  --portal-control-height-sm: 30px;
  --portal-border-width:      1px;

  /* --- Focus ----------------------------------------------- */
  /* Visible on every interactive element. Do not remove. */
  --portal-focus-width:  2px;
  --portal-focus-color:  var(--portal-accent);
  --portal-focus-offset: 2px;

  /* --- Layout ---------------------------------------------- */
  --portal-content-width: 880px;   /* account / form pages */
  --portal-wide-width:    1200px;  /* admin tables */
  --portal-nav-height:    56px;    /* == the Hub header's height */

  /* --- Motion ---------------------------------------------- */
  --portal-transition: 120ms ease;
}