/* ─────────────────────────────────────────────────────────────
   core.css — Design tokens, reset, base typography
   Load order: 1 of 3 in base.html
   ───────────────────────────────────────────────────────────── */

/* ── Design tokens ── */
:root {
  /* Backgrounds */
  --bg:      #090806;
  --sf:      #111009;
  --sf2:     #161410;

  /* Borders */
  --border:        #222018;
  --border-subtle: #1a1810;   /* chart grid lines */

  /* Brand */
  --gold:    #c9a55a;
  --gold-d:  #7a6030;

  /* Text */
  --text:    #ddd5c5;
  --muted:   #5a5248;

  /* Semantic */
  --str:     #4a7c59;   /* conservation OK / green */
  --warn:    #b8945a;   /* warning amber */
  --crit:    #c05050;   /* critical red */

  /* Conservation-specific */
  --ar:      #7060b0;   /* argon / O₂ */
  --led:     #e8d060;   /* illuminance yellow */
  --cool:    #5a8fa0;   /* file / document blue */

  /* Layout */
  --sidebar: 220px;
  --header:  56px;

  /* Typography scale */
  --font-serif:  'Libre Baskerville', Georgia, serif;
  --font-mono:   'IBM Plex Mono', 'Courier New', monospace;

  /* Spacing rhythm */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;

  /* Transition */
  --t: .15s;

  /* Depth shadows (dark theme) */
  --shadow-card:
    0 2px 4px rgba(0,0,0,0.6),
    0 6px 16px rgba(0,0,0,0.5),
    0 28px 48px -8px rgba(0,0,0,0.6),
    0 32px 56px -12px rgba(201,165,90,0.10);
  --shadow-panel:
    0 2px 4px rgba(0,0,0,0.5),
    0 6px 14px rgba(0,0,0,0.4),
    0 20px 36px -8px rgba(201,165,90,0.07);
}

/* ── Light theme ── */
[data-theme="light"] {
  --shadow-card: none;
  --shadow-panel: none;
  /* Backgrounds — same warm hue family, inverted lightness */
  --bg:      #f5f2ec;
  --sf:      #ffffff;
  --sf2:     #ede9e1;

  /* Borders */
  --border:        #d0cbc1;
  --border-subtle: #e0dbd3;

  /* Brand — unchanged */
  --gold:    #c9a55a;
  --gold-d:  #7a6030;

  /* Text */
  --text:    #1a1712;
  --muted:   #7a7268;

  /* Semantic — unchanged */
  --str:     #4a7c59;
  --warn:    #b8945a;
  --crit:    #c05050;

  /* Conservation — unchanged */
  --ar:      #7060b0;
  --led:     #b09800;   /* darkened for contrast on white */
  --cool:    #5a8fa0;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

html { transition: background .3s, color .3s; }
*, *::before, *::after { transition: background .3s, color .3s, border-color .3s, box-shadow .3s; }

/* ── Base ── */
body {
  font-family: var(--font-serif);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ── Brand typography (shared: header + login) ── */
.brand-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--gold);
}

.brand-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Links ── */
a {
  color: var(--gold);
  text-decoration: none;
}
a:hover { color: var(--text); }

/* ── Mono utility ── */
.mono {
  font-family: var(--font-mono);
}

/* ── Status colour utilities ── */
.status-text-online,
.status-text-active  { color: var(--str); }
.status-text-delayed,
.status-text-maintenance { color: var(--warn); }
.status-text-offline { color: var(--crit); }