/* ============================================================
   Azoth — App Theme v1.0  (dark-mode-first)
   Source of truth: "Azoth App Style Kit" (navy field / gold
   architecture / ember = raw input / teal = refined output /
   violet = threshold / amber+ivory = radiance).
   This file holds the canonical --azoth-* tokens, the global
   nav, and dark-mode base refinements. Each surface keeps its
   own :root that aliases local variable names onto these tokens,
   so the future overhaul happens here, in one place.
   ============================================================ */
:root{
  color-scheme: dark;

  /* Navy — the field */
  --azoth-navy-950:#020619;   /* primary app background */
  --azoth-navy-900:#071126;   /* cards, surfaces, nav */
  --azoth-navy-850:#0B1729;
  --azoth-navy-800:#111A2E;
  --azoth-navy-overlay:#01030D;

  /* Gold — the architecture */
  --azoth-gold-600:#A87936;   /* pressed */
  --azoth-gold-500:#DCAA5E;   /* primary structure / accent */
  --azoth-gold-400:#EBCB85;   /* soft structure / hover */
  --azoth-gold-300:#F1C66B;   /* amber core / radiance */
  --azoth-border-gold:#8A6B3E;

  /* Ivory — illumination */
  --azoth-ivory-100:#F3F2D7;  /* primary text on dark */
  --azoth-ivory-hot:#FFF1B8;

  /* Ember / oxblood — heat, raw input */
  --azoth-ember-700:#6F241D;
  --azoth-ember-500:#A64625;
  --azoth-ember-400:#C2702E;

  /* Teal / cyan — clarified signal, refined output */
  --azoth-teal-600:#2F747A;
  --azoth-teal-500:#569BA1;
  --azoth-cyan-300:#8EDBE3;

  /* Violet — threshold / emergence (rare) */
  --azoth-violet-600:#6D55A8;
  --azoth-violet-400:#9A7CFF;

  /* Slate — neutral text + structure */
  --azoth-slate-400:#B8B9AE;  /* secondary text */
  --azoth-slate-500:#7F837E;  /* muted text */
  --azoth-slate-600:#4E554F;  /* disabled */

  /* Borders */
  --azoth-border-dark:#1D2638;
  --azoth-border-lit:#2C3B4D;

  /* Fonts — calm geometric sans + mono label system */
  --azoth-font-sans:"Inter","Helvetica Neue",system-ui,sans-serif;
  --azoth-font-mono:"DM Mono","Courier New",monospace;
  --azoth-tracking-label:0.22em;
  --azoth-radius:2px;

  /* ---- v1 direction: "Quieter / near-mono" ----
     Navy + ivory + cool slate carry the interface. Gold is the SINGLE accent,
     reserved for primary actions and the active-nav state. Color otherwise
     lives in the logo. Status/channel hues are muted into a cool slate family. */
  --az-gold:var(--azoth-gold-500);          /* AZOTH system layer: nav, cross-app, key emphasis */
  --az-gold-press:var(--azoth-gold-600);
  --az-quiet:#8AA0B5;                        /* neutral structural accent: section labels, links */
  --az-quiet-bright:#A8BACB;

  /* Minimalist status scale (shared). Color marks emphasis, not category:
     idle = backlog/low, recede = done/faded, warn = time pressure.
     The "active" state borrows each surface's room accent. */
  --az-idle:#4E5A66;
  --az-recede:#39434E;
  --az-warn:#D08A3C;
}

/* Each surface sets --room (+ --room-bright) and the chrome below inherits it. */

/* ---- Global dark-mode base refinements ---- */
::selection{background:rgba(220,170,94,0.28);color:var(--azoth-ivory-100)}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:var(--azoth-navy-950)}
*::-webkit-scrollbar-thumb{background:#1c2740;border:2px solid var(--azoth-navy-950);border-radius:6px}
*::-webkit-scrollbar-thumb:hover{background:var(--azoth-border-gold)}

/* ============================================================
   Global navigation — present on every surface
   Bar sits on navy-950 so the logo mark blends seamlessly;
   the only chrome is a thin gold rule beneath (kit: thin gold
   borders, restrained).
   ============================================================ */
.azoth-nav{
  position:sticky;top:0;z-index:60;
  background:var(--azoth-navy-950);
  border-bottom:1px solid var(--azoth-border-gold);
}
.azoth-nav .az-inner{
  max-width:1180px;margin:0 auto;
  padding:11px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.az-brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.az-brand .az-mark{width:30px;height:30px;display:block;flex:none}
.az-brand .az-word{
  font-family:var(--azoth-font-mono);font-weight:500;
  font-size:15px;letter-spacing:0.34em;text-transform:uppercase;
  color:#C7CFD6;line-height:1;padding-top:2px;       /* quiet ivory-slate; gold lives on the logo + active tab */
}
.az-links{display:flex;align-items:center;gap:8px}
.az-links a{
  font-family:var(--azoth-font-mono);font-size:12px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--azoth-slate-400);text-decoration:none;
  padding:7px 12px;border-radius:var(--azoth-radius);
  position:relative;transition:color .14s;white-space:nowrap;
}
.az-links a:hover{color:var(--azoth-ivory-100)}
.az-links a.active{color:var(--azoth-gold-400)}
.az-links a.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-12px;
  height:2px;background:var(--azoth-gold-500);
}
.az-links a.az-logout{color:var(--azoth-slate-500)}
.az-links a.az-logout:hover{color:var(--azoth-ember-400)}
@media(max-width:520px){
  .azoth-nav .az-inner{padding:10px 18px}
  .az-brand .az-word{display:none}
  .az-links a{padding:7px 8px;letter-spacing:0.1em}
}

/* ---- Shared stat boxes (compact; one component across surfaces) ---- */
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 8px}
.stat{flex:1;min-width:112px;border:1px solid var(--azoth-border-dark);background:var(--azoth-navy-900);padding:11px 13px;border-radius:var(--azoth-radius)}
.stat .n{font-family:var(--azoth-font-sans);font-size:28px;font-weight:600;line-height:1;color:var(--azoth-ivory-100);display:block}
.stat .l{font-family:var(--azoth-font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--azoth-slate-500);margin-top:6px;display:block}

/* ---- Shared page head (thin context strip; replaces big per-page titles) ----
   The nav names the surface; this strip carries the room color, a small eyebrow
   of context, and the page's actions. Identical spacing across surfaces.
   Each surface sets --room (rule) and --room-label (legible eyebrow text). */
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  min-height:34px;                       /* same strip height with or without action buttons */
  border-bottom:1px solid var(--room);padding-bottom:11px;margin:0 0 22px}
.pagehead .eyebrow{font-family:var(--azoth-font-mono);font-weight:500;font-size:11px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--room-label)}
.pagehead .actions{display:flex;gap:10px;flex-wrap:wrap}
.pagehead .actions .btn{padding:7px 14px;font-size:13px}   /* compact so they don't inflate the strip */