/* ============================================================
   HIBI — Colors & Type
   Retro lo-fi editorial • risograph zine • late-70s magazine
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&family=Space+Grotesk:wght@400;500;600;700&family=VT323&display=swap');

:root {
  /* ---------- PALETTE — chalky pigment, aged-paper feel ---------- */
  /* Paper — newsprint off-white, just warm enough to register */
  --paper:        #F6F1E5;   /* primary background — newsprint off-white */
  --paper-deep:   #ECE5D3;   /* shadow side of paper */
  --paper-edge:   #E0D5BD;   /* paper torn edge / divider */

  /* Ink */
  --ink:          #1F1A18;   /* charcoal — linework, body type, never pure black */
  --ink-soft:     #3F3530;   /* secondary type */
  --ink-mute:     #6B5F55;   /* tertiary / metadata */

  /* Risograph hues — all desaturated, chalky */
  --flame:        #D96B27;   /* burnt terracotta — primary accent, amp/flame */
  --peach:        #E8A07A;   /* soft peach */
  --mustard:      #D9B24C;   /* mustard yellow */
  --mauve:        #C8908F;   /* dusty mauve pink */
  --lavender:     #D9B5C2;   /* lavender-pink */
  --sage:         #8A8B5C;   /* sage olive green */
  --slate:        #7A8FA3;   /* muted slate blue */
  --navy:         #3F4A5C;   /* deep navy slate */
  --taupe:        #A8957A;   /* warm taupe */

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:           var(--paper);
  --bg-deep:      var(--paper-deep);
  --surface:      #FBF7EC;   /* a hair lighter than paper, for cards */
  --surface-2:    #F1EAD7;
  --hairline:     #1F1A18;   /* black hairline borders, 1–1.5px */
  --hairline-soft: rgba(31, 26, 24, 0.35);

  --fg:           var(--ink);
  --fg-2:         var(--ink-soft);
  --fg-3:         var(--ink-mute);
  --fg-inv:       var(--paper);

  --accent:       var(--flame);
  --accent-2:     var(--mustard);
  --accent-3:     var(--mauve);

  /* States */
  --success:      var(--sage);
  --info:         var(--slate);
  --warn:         var(--mustard);
  --danger:       var(--flame);

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif:   'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'VT323', 'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE — editorial, generous ---------- */
  --t-mega:       clamp(64px, 9vw, 128px);  /* magazine cover hits */
  --t-display:    clamp(48px, 6vw, 88px);   /* feature headlines */
  --t-h1:         clamp(36px, 4vw, 56px);
  --t-h2:         clamp(28px, 3vw, 40px);
  --t-h3:         22px;
  --t-h4:         18px;
  --t-body:       16px;
  --t-small:      14px;
  --t-caption:    12px;
  --t-chrome:     11px;   /* dashboard labels — uppercase, tracked */

  /* ---------- SPACING (4-base, magazine-grid friendly) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* ---------- RADII — mostly square, occasional softness ---------- */
  --r-0:  0px;
  --r-1:  2px;
  --r-2:  4px;
  --r-pill: 999px;

  /* ---------- HAIRLINE / SHADOW ---------- */
  /* Shadows are flat offset blocks — risograph misregistration feel */
  --shadow-offset: 4px 4px 0 var(--ink);
  --shadow-offset-sm: 2px 2px 0 var(--ink);
  --shadow-offset-flame: 4px 4px 0 var(--flame);
  --shadow-offset-mauve: 4px 4px 0 var(--mauve);
  --shadow-soft: 0 2px 0 rgba(31,26,24,0.12); /* very rare */

  /* Borders */
  --b-hair: 1px solid var(--ink);
  --b-thick: 1.5px solid var(--ink);
  --b-heavy: 2px solid var(--ink);
}

/* ---------- SEMANTIC TYPE RULES ---------- */
.h-mega, .display-mega {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: var(--t-mega);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.h-display, h1.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

p, .body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.body-sans {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink-soft);
}

.caption, small {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--ink-mute);
}

.eyebrow, .label-chrome {
  font-family: var(--font-mono);
  font-size: var(--t-chrome);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 400;
}

.byline {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 16px; /* VT323 reads small */
  letter-spacing: 0.02em;
  color: var(--ink);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--flame);
}
a:hover { text-decoration-color: var(--ink); }

::selection { background: var(--mustard); color: var(--ink); }

/* ---------- BASE ---------- */
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
}