/* ============================================================
   BŪTENT! Design Tokens · v1.0 · April 2026
   ------------------------------------------------------------
   Drop-in CSS package for any BŪTENT! surface. Load this file
   once; use the custom properties and utility classes directly.

   Canonical sources (if something conflicts with this file,
   the .md files win — this file is derived, not authoritative):
     butent_02_typography.md   — type scale, weight register
     butent_03_color.md        — palette, pairing matrix, photo rule
     butent_04_grid.md         — 12×12 edge-to-edge, six recipes
     butent_06_logo.md         — wordmark rules (locked artwork)

   License: Unbounded (SIL OFL via Google Fonts) · free to embed.
   Wordmark artwork (Monument Extended) is licensed separately;
   use butent_logo.png / .svg, never re-typeset from live type.
============================================================ */


/* ---------- font load -------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');


/* ---------- root tokens ------------------------------------ */
:root {

  /* — palette (three colors · no fourth · no tints) ---------- */
  --yellow:      #FFDE3C;   /* venue signal · Pantone 108 C */
  --near-black:  #1A1A1A;   /* warm · not pure black */
  --cream:       #FFFDE6;   /* 10% of Pantone 108 C */

  /* — derived transparencies (system elements only) --------- */
  --hairline:         rgba(26, 26, 26, 0.22);
  --hairline-strong:  rgba(26, 26, 26, 0.55);
  --muted:            rgba(26, 26, 26, 0.60);
  --cream-muted:      rgba(255, 253, 230, 0.78);

  /* — type family · one only -------------------------------- */
  --font:       'Unbounded', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* — type scale -------------------------------------------- */
  --t-display-xl:  144px;
  --t-display:      96px;
  --t-hero:         72px;
  --t-sub-hero:     48px;
  --t-h1:           32px;
  --t-h2:           22px;
  --t-lead:         20px;
  --t-body:         16px;
  --t-eyebrow:      16px;
  --t-meta:         13px;
  --t-micro:        11px;

  /* — grid -------------------------------------------------- */
  --cols: 12;
  --rows: 12;

  /* — spacing scale (8px base) ------------------------------ */
  --s-1:  8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;

  /* — field distribution ------------------------------------ */
  --mix-yellow:      60%;
  --mix-cream:       30%;
  --mix-near-black:  10%;
}


/* ---------- base ------------------------------------------ */
* { box-sizing: border-box; }

html {
  font-family: var(--font);
  color: var(--near-black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; background: var(--cream); }


/* ============================================================
   TYPE ROLES
============================================================ */

.t-display-xl { font: 800 var(--t-display-xl)/0.92 var(--font); letter-spacing: -0.03em; }
.t-display    { font: 800 var(--t-display)/0.95    var(--font); letter-spacing: -0.02em; }
.t-hero       { font: 800 var(--t-hero)/0.98       var(--font); letter-spacing: -0.015em; }
.t-sub-hero   { font: 700 var(--t-sub-hero)/1.05   var(--font); letter-spacing: -0.0075em; }
.t-h1         { font: 700 var(--t-h1)/1.12         var(--font); letter-spacing: -0.0025em; }
.t-h2         { font: 700 var(--t-h2)/1.25         var(--font); letter-spacing:  0.005em; }
.t-lead       { font: 400 var(--t-lead)/1.45       var(--font); }
.t-body       { font: 400 var(--t-body)/1.5        var(--font); }

.t-eyebrow    { font: 500 var(--t-eyebrow)/1.3  var(--font); letter-spacing: 0.035em; text-transform: uppercase; }
.t-meta       { font: 500 var(--t-meta)/1.4    var(--font); letter-spacing: 0.025em; text-transform: uppercase; }
.t-micro      { font: 500 var(--t-micro)/1.4   var(--font); letter-spacing: 0.015em; text-transform: uppercase; }

.tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

.measure-body { max-width: 62ch; }
.measure-lead { max-width: 50ch; }


/* ============================================================
   COLOR UTILITIES
============================================================ */

.bg-yellow      { background: var(--yellow);     color: var(--near-black); }
.bg-cream       { background: var(--cream);      color: var(--near-black); }
.bg-near-black  { background: var(--near-black); color: var(--cream); }

.fg-yellow      { color: var(--yellow); }
.fg-cream       { color: var(--cream); }
.fg-near-black  { color: var(--near-black); }


/* ============================================================
   COMPOSITION PRIMITIVES
============================================================ */

.composition {
  position: relative;
  overflow: hidden;
  background: var(--near-black);
  color: var(--cream);
}

.composition > .photo,
.composition .photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

.anchor-tl { position: absolute; top:    var(--s-3); left:  var(--s-3); }
.anchor-tr { position: absolute; top:    var(--s-3); right: var(--s-3); }
.anchor-bl { position: absolute; bottom: var(--s-3); left:  var(--s-3); }
.anchor-br { position: absolute; bottom: var(--s-3); right: var(--s-3); text-align: right; }


/* ============================================================
   SCRIMS
============================================================ */

.scrim {
  position: absolute; inset: 0;
  pointer-events: none;
}

.scrim-top {
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0.88) 0%,
    rgba(26, 26, 26, 0.42) 55%,
    rgba(26, 26, 26, 0) 100%
  );
  height: 28%; inset: 0 0 auto 0;
}

.scrim-bottom {
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.95) 0%,
    rgba(26, 26, 26, 0.72) 55%,
    rgba(26, 26, 26, 0) 100%
  );
  height: 44%; inset: auto 0 0 0;
}

.scrim-corner-tl {
  background: radial-gradient(
    circle at top left,
    rgba(26, 26, 26, 0.82) 0%,
    rgba(26, 26, 26, 0) 70%
  );
  width: 50%; height: 40%;
  inset: 0 auto auto 0;
}


/* ============================================================
   WORDMARK
============================================================ */

.wordmark {
  display: inline-block;
  line-height: 0;
}

.wordmark img,
.wordmark svg {
  display: block;
  width: auto;
  height: 100%;
}

.wordmark-sm { height: 24px; }
.wordmark-md { height: 40px; }
.wordmark-lg { height: 64px; }
.wordmark-xl { height: 96px; }

.wordmark img,
.wordmark svg {
  filter: none !important;
  box-shadow: none !important;
}

.t-display-xl, .t-display, .t-hero, .t-sub-hero {
  text-decoration: none;
}


/* ============================================================
   RESPONSIVE TYPE
============================================================ */

@media (max-width: 900px) {
  :root {
    --t-display-xl:  96px;
    --t-display:     64px;
    --t-hero:        48px;
    --t-sub-hero:    32px;
  }
}

@media (max-width: 560px) {
  :root {
    --t-display-xl:  64px;
    --t-display:     48px;
    --t-hero:        36px;
    --t-sub-hero:    26px;
    --t-h1:          24px;
  }
}