/* ==========================================================================
   Unscarcity Design System — tokens + utilities
   Vendored from ~/patdeg/unscarcity-design-system/tokens/tokens.css (v1.0)
   Adapted for unscarcity.ai: woff2 fonts, site-relative paths.
   Re-pull with `make sync-design-system`. Do not hand-edit tokens; edit the
   source kit and re-sync. Inter is loaded by layout.html's inline @font-face.
   ========================================================================== */

@font-face {
  font-family: "Archivo Black";
  src: url("/static/fonts/ArchivoBlack.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  /* ---- color ---- */
  --us-orange: #F76B00;   /* the brand field — full-bleed, never a thin accent */
  --us-black:  #1A1A1A;   /* ink: all text on orange, primary text on white */
  --us-white:  #FFFFFF;   /* paper */
  --us-gray:   #5C5C5C;   /* secondary text on white ONLY */
  --us-cream:  #FFF4EA;   /* tinted reading background (long-form articles) */

  /* ---- type ---- */
  --us-font-display: "Archivo Black", "Arial Black", sans-serif;
  --us-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --us-size-caption: 13px;
  --us-size-ui: 15px;
  --us-size-body: 17px;
  --us-size-h3: 22px;
  --us-size-h2: 28px;
  --us-size-h1: 40px;
  --us-size-display: clamp(48px, 8vw, 96px);
  --us-track-display: -0.03em;
  --us-track-eyebrow: 0.12em;

  /* ---- layout ---- */
  --us-radius: 0px;            /* the brand is square-cornered */
  --us-pad: 24px;
  --us-max-width: 1080px;
}

/* ================= base ================= */
body {
  font-family: var(--us-font-body);
  font-size: var(--us-size-body);
  line-height: 1.65;
  color: var(--us-black);
  background: var(--us-white);
  margin: 0;
}

h1, h2, h3, h4 { color: var(--us-black); }
a { color: var(--us-black); }

/* ---- display type ---- */
.us-display {
  font-family: var(--us-font-display);
  letter-spacing: var(--us-track-display);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}

/* ================= utilities ================= */

/* Eyebrow: credential/context line above titles */
.us-eyebrow {
  font: 700 var(--us-size-caption)/1 var(--us-font-body);
  letter-spacing: var(--us-track-eyebrow);
  text-transform: uppercase;
  color: var(--us-black);
  margin: 0;
}

/* Hazard stripe band — the family motif. ONE per composition. */
.us-hazard {
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--us-black) 0 14px,
    var(--us-orange) 14px 30px
  );
  border: none;
  margin: 0;
}

/* Orange field section (hero, banners). Text inside MUST be black. */
.us-field {
  background: var(--us-orange);
  color: var(--us-black);
}

/* Split information blocks: white statement + black identity */
.us-split { display: grid; grid-template-columns: 1fr 1fr; }
.us-panel--white { background: var(--us-white); color: var(--us-black); padding: calc(var(--us-pad) * 1.5); }
.us-panel--black { background: var(--us-black); color: var(--us-white); padding: calc(var(--us-pad) * 1.5); }
.us-panel--black .us-accent { color: var(--us-orange); } /* large/bold only */
@media (max-width: 640px) { .us-split { grid-template-columns: 1fr; } }

/* Buttons: black on orange (primary), orange-bordered on white (ghost) */
.us-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 var(--us-size-ui)/1 var(--us-font-body);
  padding: 14px 22px;
  text-decoration: none;
  border: 2px solid var(--us-black);
  color: var(--us-black);
  background: var(--us-orange);
  cursor: pointer;
}
.us-btn:hover { color: var(--us-black); background: #ff7d1a; }
.us-btn--solid { background: var(--us-black); color: var(--us-white); border-color: var(--us-black); }
.us-btn--solid:hover { color: var(--us-white); background: #000; }
.us-btn--ghost { background: transparent; }
.us-btn--ghost:hover { background: var(--us-black); color: var(--us-white); }
/* Paper button — white fill, for use on the orange field where orange-on-orange fails */
.us-btn--paper { background: var(--us-white); color: var(--us-black); border-color: var(--us-black); }
.us-btn--paper:hover { background: var(--us-cream); color: var(--us-black); }
.us-btn:focus-visible { outline: 3px solid var(--us-black); outline-offset: 2px; }

/* Reading surface for research articles */
.us-article { background: var(--us-cream); }
.us-article .us-secondary { color: var(--us-gray); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}