/* magazineteens — design tokens */
:root {
  --cream: #F2EFEA;
  --cream-2: #ECE7DF;
  --ink: #0A0A0A;
  --ink-2: #1A1A1A;
  --muted: #6E6960;
  --rule: #1A1A1A;
  --line: #D8D2C7;
  --pink: #FF2D6F;
  --acid: #C7FF3A;
  --ok: #1F8A5B;
  --warn: #E0A93D;
  --err: #D8483A;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

.label, .micro {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.serif { font-family: var(--serif); }
.italic { font-style: italic; }
.rule { background: var(--rule); height: 1px; width: 100%; }
.thin-rule { background: var(--line); height: 1px; width: 100%; }

/* placeholder image — striped */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      #1a1a1a 0 1px, transparent 1px 9px),
    #2a2a2a;
  color: #F2EFEA;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
}
.ph::after {
  content: attr(data-ph);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F2EFEA;
  background: rgba(0,0,0,0.4);
  padding: 4px 8px;
  margin: 10px;
}
.ph.light {
  background:
    repeating-linear-gradient(135deg,
      #d8d2c7 0 1px, transparent 1px 9px),
    #e6e1d6;
  color: #0A0A0A;
}
.ph.light::after { color: #0a0a0a; background: rgba(255,255,255,0.55); }
.ph.pink {
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.18) 0 1px, transparent 1px 9px),
    var(--pink);
}
.ph.acid {
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.18) 0 1px, transparent 1px 9px),
    var(--acid);
}

/* tag chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
}
.chip.solid { background: var(--ink); color: var(--cream); }
.chip.pink { background: var(--pink); color: var(--cream); border-color: var(--pink); }
.chip.acid { background: var(--acid); color: var(--ink); border-color: var(--acid); }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--pink); color: var(--cream); }