/* ============================================================
   SUPRLAB — colors_and_type.css
   Terminal-grade design tokens. Mono-only typography,
   neubrutalist surfaces, hard offset shadows, 0 radius.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;0,800;1,400&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ---------- DARK (default) ---------- */
:root,
[data-theme="dark"] {
  /* surfaces */
  --bg:        #12110d;
  --bg-deep:   #0b0a07;
  --panel:     #1a1813;
  --panel-2:   #221f18;

  /* foreground / ink */
  --fg1:       #f2ead7;  /* primary ink */
  --fg2:       #a39b87;  /* secondary, body lede */
  --fg3:       #6b6557;  /* dim, captions, hints */
  --ink:       #f2ead7;  /* alias */
  --ink-mid:   #a39b87;
  --ink-dim:   #6b6557;

  /* lines */
  --line:      #f2ead7;
  --line-soft: #36322a;

  /* text-on-accent fill */
  --on-accent: #0f0d0a;

  /* accent fills (neon-on-mono) */
  --amber:     #e89a22;
  --green:     #8fd17a;
  --cyan:      #5fb0bf;
  --magenta:   #d76f9e;
  --violet:    #9a86d6;
  --red:       #e6604a;

  /* accent-as-text (contrast-safe in dark) */
  --amber-tx:  #e89a22;
  --green-tx:  #8fd17a;
  --cyan-tx:   #5fb0bf;
  --magenta-tx:#d76f9e;
  --violet-tx: #9a86d6;
  --red-tx:    #e6604a;

  /* atmospherics */
  --grid:      #36322a;
  --scan:      rgba(0,0,0,.12);

  /* borders + shadows (hard, offset, never blurred) */
  --bd:         2px solid var(--line);
  --bd-soft:    1px solid var(--line-soft);
  --shadow-sm:  3px 3px 0 0 var(--line);
  --shadow-ink: 5px 5px 0 0 var(--line);
  --shadow-amber: 5px 5px 0 0 var(--amber);
  --shadow-lg:  8px 8px 0 0 var(--line);

  /* terminal palette (stays dark in both themes) */
  --term-bg:   #0b0a07;
  --term-bar:  #1a1813;
  --term-sep:  #2b2719;
  --term-green:#8fd17a;
  --term-cyan: #5fb0bf;
  --term-amber:#e89a22;
  --term-red:  #e6604a;
  --term-dim:  #6b6557;
  --term-ink:  #d8d0bd;
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  --bg:        #f3ede0;
  --bg-deep:   #e7dfcd;
  --panel:     #fbf8f0;
  --panel-2:   #ece4d3;

  --fg1:       #1a1712;
  --fg2:       #5d5546;
  --fg3:       #8b8270;
  --ink:       #1a1712;
  --ink-mid:   #5d5546;
  --ink-dim:   #8b8270;

  --line:      #1a1712;
  --line-soft: #d9cfb8;

  --on-accent: #1a1712;

  --green:     #7cc46a;

  --amber-tx:  #a9700f;
  --green-tx:  #3f8a52;
  --cyan-tx:   #2c7d8c;
  --magenta-tx:#b54675;
  --violet-tx: #6d57a8;
  --red-tx:    #c23b27;

  --grid:      #ddd3bd;
  --scan:      rgba(0,0,0,.045);
}

/* ---------- TYPOGRAPHY ---------- */
:root {
  --font-display: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale */
  --t-hero:    clamp(40px, 8vw, 86px);   /* h1 hero */
  --t-h1:      34px;
  --t-h2:      26px;
  --t-h3:      20px;
  --t-display: 42px;
  --t-body:    15px;
  --t-body-lg: 17px;
  --t-small:   13px;
  --t-cap:     11px;

  --lh-tight:  0.98;
  --lh-snug:   1.2;
  --lh-body:   1.6;
  --lh-loose:  1.75;

  --tr-tight:  -0.02em;
  --tr-display: 0.02em;
  --tr-caps:   0.14em;
  --tr-kicker: 0.22em;
}

/* ---------- SPACING ---------- */
:root {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: 0; /* hard zero. it's the law. */
}

/* ---------- SEMANTIC ELEMENT STYLES ----------
   Apply to your page by adding `class="suprlab"` to a wrapper,
   or use the tokens directly.
*/
.suprlab,
.suprlab * { box-sizing: border-box; }

.suprlab {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.suprlab h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
}
.suprlab h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4vw, var(--t-h1));
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.suprlab h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  color: var(--fg1);
}
.suprlab h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  color: var(--fg1);
}
.suprlab p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg2);
}
.suprlab p b, .suprlab p strong { color: var(--fg1); font-weight: 600; }

.suprlab code, .suprlab pre, .suprlab kbd {
  font-family: var(--font-mono);
}
.suprlab pre {
  background: var(--term-bg);
  color: var(--term-ink);
  padding: var(--s4) var(--s5);
  border: var(--bd);
  box-shadow: var(--shadow-amber);
  white-space: pre;
  overflow-x: auto;
}

.suprlab .kicker,
.suprlab .caption {
  font-family: var(--font-display);
  font-size: var(--t-cap);
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  color: var(--fg3);
}
.suprlab .kicker {
  display: inline-block;
  color: var(--on-accent);
  background: var(--green);
  border: 2px solid var(--line);
  padding: 4px 10px;
}

.suprlab a {
  color: var(--cyan-tx);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.suprlab a:hover { color: var(--amber-tx); }

.suprlab hr {
  border: 0;
  border-top: var(--bd);
  margin: var(--s6) 0;
}