/* =============================================================
   USUFRUCT DESIGN TOKENS — colors, type, spacing
   Mono-first. Hairline borders. No rounded corners.
   ============================================================= */

/* --- Fonts ---------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  /* ---- Color: surfaces ------------------------------------ */
  --bg-0: #000000;        /* page background — true black */
  --bg-1: #0d0d0d;        /* raised section / panel (matches simulator --panel) */
  --bg-2: #111114;        /* card */
  --bg-3: #17171c;        /* hover / pressed */
  --bg-inv: #FFFFFF;      /* inverse surface (light cards / banners) */

  /* ---- Color: foreground (neutral scale) ------------------ */
  --fg-0: #f0f0f0;        /* primary text (matches simulator --text) */
  --fg-1: rgba(255,255,255,0.80); /* secondary (matches simulator --text-dim) */
  --fg-2: rgba(255,255,255,0.55); /* tertiary / labels */
  --fg-3: rgba(255,255,255,0.28); /* very dim / disabled */
  --fg-inv: #000000;      /* on light surface */

  /* ---- Color: borders / lines ----------------------------- */
  --line-0: #FFFFFF;      /* full-strength stroke (used sparingly) */
  --line-1: rgba(255,255,255,0.14); /* default hairline */
  --line-2: rgba(255,255,255,0.09); /* subtle divider (matches simulator --border) */
  --line-3: rgba(255,255,255,0.05); /* near-invisible grid */

  /* ---- Color: signal (blue accent — primary) -------------- */
  --signal:     #2979c8;  /* blue — THE accent. live state, links, focus */
  --signal-dim: #1f5c99;  /* deeper blue for press states */
  --signal-fg:  #FFFFFF;  /* foreground on blue */

  /* ---- Color: secondary accents --------------------------- */
  --good:       #4a9e62;  /* green — earnings, settled, healthy */
  --good-dim:   #356e44;
  --warn:       #c47a35;  /* orange — retire flag, handover countdown */
  --warn-dim:   #8a5524;
  --danger:     #d24a4a;  /* red — displacement, error (muted to fit palette) */

  /* ---- Color: protocol state (named) ---------------------- */
  --state-idle:     var(--fg-1);   /* neutral */
  --state-dutch:    var(--warn);   /* orange — descending */
  --state-occupied: var(--signal); /* blue — live tenancy */
  --state-demand:   var(--danger); /* red — contested */
  --state-retired:  var(--fg-3);   /* terminal */
  --state-live:     var(--good);   /* green — mainnet, healthy */

  /* ---- Type: families ------------------------------------- */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* ---- Type: scale (rem-based, 16px root) ----------------- */
  --t-xs:   11px;   /* labels / micro */
  --t-sm:   13px;   /* captions / meta */
  --t-md:   15px;   /* body */
  --t-lg:   18px;   /* lede */
  --t-xl:   24px;   /* h4 */
  --t-2xl:  32px;   /* h3 */
  --t-3xl:  44px;   /* h2 */
  --t-4xl:  64px;   /* h1 */
  --t-5xl:  96px;   /* display */
  --t-6xl:  144px;  /* hero */

  /* ---- Type: tracking ------------------------------------- */
  --tr-tight: -0.03em;    /* display */
  --tr-snug:  -0.01em;    /* h1/h2 */
  --tr-norm:  0;
  --tr-wide:  0.04em;     /* small mono labels */
  --tr-wider: 0.12em;     /* uppercase eyebrows */
  --tr-widest: 0.24em;    /* hero eyebrows */

  /* ---- Spacing (4px base) --------------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 144px;
  --sp-11: 192px;

  /* ---- Radii ---------------------------------------------- */
  --rad-0: 0;       /* default — everything is square */
  --rad-1: 2px;     /* inputs / chips (rare) */
  --rad-pill: 999px;/* status dot only */

  /* ---- Borders -------------------------------------------- */
  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-bold: 3px;

  /* ---- Shadows (used VERY sparingly) ---------------------- */
  --shadow-lift: 0 0 0 1px var(--line-1), 0 24px 60px -20px rgba(0,0,0,0.8);
  --shadow-glow: 0 0 0 1px var(--signal), 0 0 32px -4px rgba(41,121,200,0.40);

  /* ---- Motion --------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0, 0.8, 0.2);
  --dur-fast: 80ms;
  --dur-base: 160ms;
  --dur-slow: 320ms;

  /* ---- Layout --------------------------------------------- */
  --container: 1280px;
  --gutter: 24px;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   Apply by class (.us-h1, .us-eyebrow) OR pre-styled HTML.
   ============================================================= */

.us-display, h1.us-display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(64px, 9vw, var(--t-6xl));
  line-height: 0.92;
  letter-spacing: var(--tr-tight);
  color: var(--fg-0);
}

.us-h1, h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-4xl);
  line-height: 1.0;
  letter-spacing: var(--tr-snug);
  color: var(--fg-0);
}

.us-h2, h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-3xl);
  line-height: 1.05;
  letter-spacing: var(--tr-snug);
  color: var(--fg-0);
}

.us-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-2xl);
  line-height: 1.15;
  letter-spacing: var(--tr-snug);
  color: var(--fg-0);
}

.us-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.2;
  color: var(--fg-0);
}

.us-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-xs);
  line-height: 1;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-2);
}

.us-eyebrow--signal { color: var(--signal); }

.us-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--fg-1);
  text-wrap: pretty;
}

.us-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--fg-1);
  text-wrap: pretty;
}

.us-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--fg-2);
}

.us-code, code, pre {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--fg-0);
}

pre {
  background: var(--bg-1);
  border: var(--bw-hair) solid var(--line-1);
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
}

.us-link, a {
  color: var(--fg-0);
  text-decoration: underline;
  text-decoration-color: var(--fg-3);
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

.us-link:hover, a:hover {
  color: var(--signal);
  text-decoration-color: var(--signal);
}

/* --- Reset hooks for the system ------------------------------ */
.us-reset {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Status dot ---------------------------------------------- */
.us-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--rad-pill);
  background: var(--fg-2);
  vertical-align: 0.05em;
}
.us-dot--live    { background: var(--good);   box-shadow: 0 0 12px var(--good); }
.us-dot--occupied{ background: var(--signal); box-shadow: 0 0 12px var(--signal); }
.us-dot--dutch   { background: var(--warn); }
.us-dot--demand  { background: var(--danger); }
.us-dot--retired { background: var(--fg-3); }