/* ============================================================
   $SNDBX — theme.css
   THE SKIN. Every color, font, and spacing decision lives here.
   style.css is structure only and should never need edits
   for a re-theme. This file is the whole re-theme.

   Direction: printed engineering spec sheet. White paper,
   black ink, hairline rules, stamped tags. The inverse of
   $TEST's black terminal — same lab, different document.
   ============================================================ */

:root {
  /* -- Ink & paper -- */
  --paper:        #ffffff;
  --ink:          #141414;
  --ink-muted:    #5c5c5c;
  --ink-faint:    #9a9a9a;
  --rule:         #141414;   /* hairline rule color */
  --rule-soft:    #d9d9d9;   /* secondary, lighter rules */

  /* -- Stamped tags -- */
  --tag-bg:       #141414;   /* solid ink tag (e.g. ACTIVE TEST) */
  --tag-fg:       #ffffff;
  --tag-pending-bg: #ffffff; /* outlined tag (e.g. PENDING) */
  --tag-pending-fg: #5c5c5c;
  --tag-pending-border: #9a9a9a;

  /* -- Type -- */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --size-body:    1rem;
  --size-small:   0.8125rem;
  --size-label:   0.6875rem;
  --size-h1:      clamp(2.4rem, 6vw, 3.6rem);
  --size-h2:      1.05rem;

  --track-label:  0.14em;    /* letterspacing for stamped labels */
  --track-h:      0.08em;

  --leading-body: 1.65;

  /* -- Rules & radii -- */
  --hairline:     1px solid var(--rule);
  --hairline-soft: 1px solid var(--rule-soft);
  --radius:       0;         /* paper has corners */

  /* -- Spacing scale -- */
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: 5rem;

  /* -- Layout -- */
  --measure:      880px;     /* content width */
  --strip-height: 4px;       /* top ink bar: the letterhead rule */

  /* -- Buttons -- */
  --btn-bg:       #141414;
  --btn-fg:       #ffffff;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-fg: #141414;
  --btn-secondary-border: #141414;
  --btn-disabled-fg: #9a9a9a;
  --btn-disabled-border: #d9d9d9;

  /* -- Panels -- */
  --panel-border: var(--hairline);
  --panel-bg:     #ffffff;
  --panel-caption: var(--ink-muted);

  /* -- Focus -- */
  --focus-ring:   2px solid #141414;
  --focus-offset: 2px;
}

/* Role assignments (what wears which font) */
body            { font-family: var(--font-body); color: var(--ink); background: var(--paper); }
h1, h2, h3      { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-h); }
.wordmark,
.doc-id,
.status-tag,
.eyebrow,
.mono,
.addr,
time,
button,
.btn            { font-family: var(--font-mono); }

/* Selection reads like a highlighter that only has ink */
::selection     { background: #141414; color: #ffffff; }