/* ============================================================================
   Server Assistant, operator console design tokens (Ember / forge palette).
   Approved warm-forge restyle: forge-dark canvas, diamond-blue accent (the 10%),
   gold = premium/milestone, pink = SAi identity. Mobile-first.
   These names are the contract the stylesheet + app.js inline styles rely on, 
   keep the variable names stable even if values are tuned.
   ============================================================================ */

:root {
  /* ── Canvas / surfaces ────────────────────────────────────────────────── */
  --bg-0:        #141010;                       /* forge canvas */
  --bg-1:        rgba(20, 16, 16, 0.90);        /* frosted header */
  --bg-nav:      rgba(20, 16, 16, 0.94);        /* frosted bottom nav */

  --surface:     rgba(255, 255, 255, 0.04);     /* panels / cards */
  --surface-2:   rgba(255, 255, 255, 0.06);     /* slightly raised */
  --surface-hi:  rgba(255, 255, 255, 0.10);     /* hover / secondary buttons */
  --glass-sheen: rgba(255, 255, 255, 0.05);
  --glass-panel: rgba(255, 255, 255, 0.04);
  --glass-strong:rgba(20, 16, 16, 0.92);

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --fg-0: #f1ece6;   /* primary  (AA on canvas) */
  --fg-1: #b3a99e;   /* secondary */
  --fg-2: #857c72;   /* muted */
  --fg-3: #857c72;   /* muted alias */

  /* Back-compat aliases */
  --ink:          var(--fg-0);
  --ink-soft:     var(--fg-1);
  --glass-border: var(--border);

  /* ── Accent, diamond-blue (the 10%: primary CTA, active nav, key figures) ─ */
  --accent:           #3cc1f0;
  --accent-bright:    #62cef4;                    /* brighter text/icon accent */
  --accent-soft:      rgba(98, 206, 244, 0.16);
  --accent-container: rgba(98, 206, 244, 0.16);
  --accent-border:    rgba(98, 206, 244, 0.30);   /* hero / active outlines */
  --accent-hero:      rgba(98, 206, 244, 0.09);   /* hero background wash */
  --on-accent:        #04121b;

  /* Premium ONLY, billing / subscription / milestone */
  --gold:      #f5c422;
  --gold-soft: rgba(245, 196, 34, 0.16);

  /* SAi / AI identity ONLY */
  --pink:      #ee5ba2;
  --pink-soft: rgba(238, 91, 162, 0.16);

  /* Neutral / decorative */
  --steel:    #9aa1a9;
  --steel-2:  #6b6259;

  /* ── Status ──────────────────────────────────────────────────────────── */
  --warn:     #e0a13a;
  --high:     #ff9466;
  --critical: #ff6b6b;
  --ok:       #54e08e;
  --ok-deep:   #1e8449;
  --gold-deep: #b7950b;

  /* Roadmap build-queue band colours */
  --band-gold:   #f1c40f;
  --band-purple: #a78bfa;
  --band-blue:   #60a5fa;
  --band-green:  #34d399;

  --brand-discord: #5865f2;
  --brand-blue:    #3498db;

  /* ── Lines / shadow ──────────────────────────────────────────────────── */
  --border:   rgba(255, 255, 255, 0.08);
  --divider:  rgba(255, 255, 255, 0.05);
  --hairline: rgba(255, 255, 255, 0.07);   /* topbar / nav edges */
  --shadow:    0 8px 28px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22);

  /* ── Safe-area insets ────────────────────────────────────────────────── */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* ── Type scale (all rem), two voices: 400 body / 600 headings ───────── */
  --fs-3xs:  0.625rem;   /* ~10px */
  --fs-2xs:  0.6875rem;  /* ~11px label */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 0.95rem;
  --fs-md:   1.05rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;     /* hero numbers */
  --fs-2xl:  1.85rem;
  --fs-stat: 1.5625rem;  /* 25px stat number */

  /* ── Spacing, generous, ~14px gutters ───────────────────────────────── */
  --gap-xs: 0.4rem;
  --gap-sm: 0.6rem;
  --gap-md: 0.875rem;   /* ~14px gutter */
  --gap-lg: 1.25rem;

  --pad-card: 1rem;

  /* ── Sizing ──────────────────────────────────────────────────────────── */
  --circle-sm: 42px;
  --circle-lg: 56px;
  --tap: 44px;
  --pill-w: 64px;
  --pill-h: 34px;

  --header-h: 56px;
  --bottom-nav-h: 64px;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --r-lg: 15px;   /* hero / large panels */
  --r-md: 14px;   /* cards */
  --r-sm: 13px;   /* stat cards / small panels */
  --r-pill: 999px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --t-fast: 120ms ease;
  --t-base: 160ms ease;
}