/* ─────────────────────────────────────────────────────────────────
   Mirror Design System — tokens
   Editorial, off-white & near-black, with a single deep-ocean accent.
   Imported from the canonical Chapter 01 page (index.html / styles.css).
   ───────────────────────────────────────────────────────────────── */

/* Fonts — load these if you're using the system in isolation. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Archivo+Black&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=DM+Serif+Display:ital@0;1&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── COLOR — neutrals ── */
  --bg:        #fafaf8; /* page background, warm off-white */
  --bg-2:      #f3f1ec; /* card / surface background */
  --ink:       #0b0b0c; /* primary text, near-black with a green hint */
  --ink-2:     #1a1a1c; /* secondary text */
  --mute:      #6a6a6e; /* muted/meta/eyebrow text */
  --hair:      rgba(11, 11, 12, 0.10); /* heavier hairline / dividers */
  --hair-2:    rgba(11, 11, 12, 0.06); /* lighter hairline / card borders */

  /* ── COLOR — single accent ── */
  --accent:    oklch(0.42 0.09 230); /* deep ocean blue, used sparingly */

  /* ── COLOR — inverse / dark sections (Mirror Night) ── */
  --ink-inv:        #f3f1ec;
  --ink-inv-mute:   rgba(243, 241, 236, 0.70);
  --hair-inv:       rgba(243, 241, 236, 0.18);

  /* ── TYPE — families ── */
  --font-display: 'Anton', 'Helvetica Neue', sans-serif;             /* tall condensed display */
  --font-italic:  'Playfair Display', 'Times New Roman', serif;       /* italic accent in titles */
  --font-serif:   'Playfair Display', 'Times New Roman', serif;       /* editorial titles */
  --font-body:    'Helvetica Neue', 'Helvetica', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;   /* eyebrows, meta, captions */

  --serif-weight:    400;
  --display-stretch: 1;

  /* ── LAYOUT ── */
  --maxw:   1240px;
  --gutter: clamp(20px, 4vw, 56px);

  /* ── RADIUS ── */
  --r-1:  2px;  /* meta tags, eyebrows */
  --r-2:  4px;  /* cards (pcard, listen card) */
  --r-3:  8px;  /* marquee item */
  --r-pill: 999px;

  /* ── SHADOWS ── */
  --shadow-hairline: 0 1px 0 rgba(11,11,12,0.02);
  --shadow-card:     0 12px 32px -24px rgba(11,11,12,0.18);
  --shadow-photo:    0 14px 32px -22px rgba(11,11,12,0.30);
  --shadow-pcard:    0 18px 40px -20px rgba(11,11,12,0.18);
  --shadow-nav:      0 14px 32px -18px rgba(11,11,12,0.35); /* for floating nav buttons */
  --shadow-scrim:    linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.78) 70%, rgba(11,11,12,0.92) 100%);
}

/* ─────────────────────────────────────────────────────────────────
   Semantic type roles
   Use these classes directly, or copy the rules into your styles.
   ───────────────────────────────────────────────────────────────── */

.ds-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(80px, 14vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.ds-h1 {
  font-family: var(--font-serif);
  font-weight: var(--serif-weight);
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}
.ds-h2 {
  font-family: var(--font-serif);
  font-weight: var(--serif-weight);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.ds-h3 {
  font-family: var(--font-serif);
  font-weight: var(--serif-weight);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.ds-kicker {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 20px;
  color: var(--mute);
}
.ds-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}
.ds-lede {
  font-family: var(--font-serif);
  font-weight: var(--serif-weight);
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink-2);
}
.ds-eyebrow,
.ds-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
}
.ds-meta--strong {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* italic accent inside any title */
em.ds-em,
em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}