/* =========================================================
   rezo.css: shared by every Rezo page (RZM folder)
   Tokens match the existing pages: brass / ivory / dark wood,
   Archivo + IBM Plex Mono. Edit brand values HERE only.

   Safe to include on any page: it sets tokens and .rz-* classes
   only, with no element-level resets, so existing page styles
   are untouched.
   ========================================================= */

:root {
  /* Surfaces */
  --rz-ground:    #191613;  /* page background */
  --rz-plate:     #211C17;  /* cards / panels */
  --rz-well:      #0F0D0B;  /* inset areas (Deck) */
  --rz-rail:      #120F0D;  /* sidebars (Backstage) */
  --rz-line:      #3A3127;

  /* Text */
  --rz-ivory:     #F1E9DC;
  --rz-ivory-dim: #B5AA99;

  /* Brand accent */
  --rz-brass:     #D9A441;
  --rz-brass-hi:  #E6B65A;
  --rz-brass-dim: #9C7A44;
  --rz-brass-soft:#2A2218;

  /* States */
  --rz-good:      #9CC98A;
  --rz-warn:      #E8955A;
  --rz-crit:      #E8735F;

  /* Type (fonts load from Google in each page's <head>) */
  --rz-font-display: "Archivo", system-ui, sans-serif;
  --rz-font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Spacing */
  --rz-1: 4px;  --rz-2: 8px;  --rz-3: 16px;
  --rz-4: 24px; --rz-5: 40px; --rz-6: 64px;

  /* Shape + motion */
  --rz-radius:    6px;
  --rz-radius-sm: 3px;
  --rz-ease:      cubic-bezier(.2,.7,.2,1);
  --rz-max:       1120px;
}

/* ---------- Shared nav (only appears where <nav data-rezo-nav> is placed) ---------- */
.rz-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--rz-ground) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rz-line);
}
.rz-nav__inner {
  display: flex; align-items: center; gap: var(--rz-4);
  max-width: var(--rz-max); margin: 0 auto; padding: var(--rz-3);
}
.rz-nav__logo {
  font-family: var(--rz-font-display); font-weight: 800; font-stretch: 75%;
  letter-spacing: .04em; color: var(--rz-ivory); text-decoration: none;
}
.rz-nav__links { display: flex; gap: var(--rz-3); margin-left: auto; }
.rz-nav__links a {
  font-family: var(--rz-font-mono); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rz-ivory-dim); text-decoration: none;
}
.rz-nav__links a:hover,
.rz-nav__links a[aria-current="page"] { color: var(--rz-brass); }

/* ---------- Building blocks for new pages ---------- */
.rz-card {
  background: var(--rz-plate); border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius); padding: var(--rz-4); color: var(--rz-ivory);
}
.rz-btn {
  display: inline-flex; align-items: center; gap: var(--rz-2);
  font-family: var(--rz-font-mono); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rz-brass); background: transparent;
  border: 1px solid var(--rz-brass-dim); border-radius: var(--rz-radius-sm);
  padding: .7rem 1.1rem; cursor: pointer; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.rz-btn:hover { border-color: var(--rz-brass); }
.rz-btn--primary { background: var(--rz-brass); color: var(--rz-ground); border-color: var(--rz-brass); }
.rz-btn--primary:hover { background: var(--rz-brass-hi); }
.rz-label {
  font-family: var(--rz-font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rz-ivory-dim);
}
.rz-mono { font-family: var(--rz-font-mono); font-variant-numeric: tabular-nums; }