/* TW Custom Creation - design tokens.
 *
 * Every value here is sampled from the client's own artwork, and every contrast
 * ratio below is COMPUTED, not eyeballed. See docs/BRAND-GUIDE.md.
 *
 *   accent  #FC6C0C on ink-900  6.83:1  AA        <- the reason this brand is dark
 *   accent  #FC6C0C on white    2.76:1  FAIL
 *   chrome  #FAFAFA on ink-900 18.86:1  AAA
 *   muted   #8A8F98 on ink-900  6.06:1  AA
 *   flag    #901818 on ink-900  2.18:1  FAIL      <- merch mark only, never UI
 *
 * Strict one-way layers: primitive -> semantic -> component. A component reads
 * only semantic tokens. If it is not a token, it is a bug.
 */

/* ── Primitives ─────────────────────────────────────────────────────────── */
:root {
  --tw-ink-900:  #0A0B0D;   /* banner background, dominant cluster */
  --tw-ink-850:  #101319;
  --tw-ink-800:  #141E28;   /* the banner's PCB-trace layer, cool blue-tinted */
  --tw-ink-700:  #1D2833;
  --tw-ink-600:  #2A3540;
  /* WCAG 2.2 requires 3:1 on the boundary of an interactive component. The
     decorative hairlines below are NOT that - they separate content and are
     allowed to be quiet. This one outlines inputs and buttons, so it is
     measured: 3.55:1 on ink-900, 3.04:1 on the panel. */
  --tw-ink-450:  #636971;

  --tw-accent:     #FC6C0C; /* Etsy logo chevron, peak saturation */
  --tw-accent-dim: #B45418;
  --tw-accent-deep:#843C18;

  --tw-chrome-100: #FAFAFA;
  --tw-chrome-200: #F0F0F0;
  --tw-chrome-300: #D2D2D2;
  --tw-chrome-500: #8A8F98;
  --tw-chrome-600: #5A616B;

  --tw-flag-red:   #901818; /* the koozie line. NEVER a UI colour. */

  --tw-ok:    #4E9A5A;
  --tw-warn:  #C9A227;
  --tw-error: #D9534F;
}

/* ── Semantic ───────────────────────────────────────────────────────────── */
:root {
  --bg:            var(--tw-ink-900);
  --bg-raised:     var(--tw-ink-850);
  --bg-panel:      var(--tw-ink-800);
  --line:          var(--tw-ink-700);
  --line-strong:   var(--tw-ink-600);   /* decorative edges only */
  --line-control:  var(--tw-ink-450);   /* anything a person operates */

  --text:          var(--tw-chrome-100);
  --text-2:        var(--tw-chrome-300);
  --text-muted:    var(--tw-chrome-500);

  --accent:        var(--tw-accent);
  --accent-hover:  var(--tw-accent-dim);
  --on-accent:     var(--tw-ink-900);

  /* Type. Never Inter, never Space Grotesk. */
  --font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Contrast by extremes: 800 against 400, size jumps of 3x not 1.5x. */
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.06rem, 1.03rem + 0.14vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.34vw, 1.45rem);
  --step-2:  clamp(1.60rem, 1.42rem + 0.90vw, 2.20rem);
  --step-3:  clamp(2.20rem, 1.75rem + 2.25vw, 3.60rem);
  --step-4:  clamp(2.90rem, 1.90rem + 5.00vw, 6.50rem);

  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;

  /* An operational page earns less air than a brand page, and every decorative
     gap is a scroll the visitor did not choose. */
  --section-y: clamp(2.5rem, 4vw, 4.5rem);

  --wrap: 1180px;
  --measure: 68ch;

  /* One radius language: near-square. Machined parts have edges. */
  --radius: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Self-hosted faces ──────────────────────────────────────────────────── */
@font-face {
  font-family: "Saira Condensed"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("../fonts/saira-condensed-800.woff2") format("woff2");
}
@font-face {
  font-family: "Saira Condensed"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/saira-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/plex-mono-600.woff2") format("woff2");
}