/* ═══════════════════════════════════════════════════════════════════════════
   VINTOLOGY — EDITORIAL FASHION SYSTEM (base tokens, reset, typography)
   Minimalist black / white / grey. Light-first: white canvas, ink text.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── palette ── */
  --white: #FFFFFF;
  --off-white: #F7F7F5;
  --ink: #111111;
  --charcoal: #333333;
  --grey: #777777;
  --hairline: #E6E6E3;

  /* ── theme mapping (light default) ── */
  --bg: var(--white);
  --bg-2: var(--off-white);
  --surface: var(--off-white);
  --surface-solid: var(--white);
  --line: var(--hairline);
  --text: var(--ink);
  --text-2: var(--charcoal);
  --text-3: var(--grey);
  --accent: var(--ink);
  --accent-soft: var(--hairline);
  --danger: #b3261e;               /* error text, AA on white */
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  --shadow: 0 18px 44px rgba(17, 17, 17, 0.10);
  --shadow-lg: 0 30px 70px rgba(17, 17, 17, 0.16);
  --main-pad: 1.25rem;
  --main-max: 1240px;

  /* ── type scale ── */
  --font-display: 'Montserrat', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.14em;
  --tracking-mega: 0.32em;
}

[data-theme="dark"] {
  --bg: var(--ink);
  --bg-2: #1a1a1a;
  --surface: #1a1a1a;
  --surface-solid: #161616;
  --line: #2c2c2c;
  --text: var(--white);
  --text-2: #c9c9c6;
  --text-3: var(--grey);
  --accent: var(--white);
  --accent-soft: #2c2c2c;
  --danger: #e06c5e;               /* lighter red, readable on #111 */
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  line-height: 1.08;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

main { max-width: var(--main-max); margin: 0 auto; padding: 0 var(--main-pad) 5rem; }

:focus-visible { outline: 2px solid var(--text-3); outline-offset: 3px; }

.sr-only, .skip-link, .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: .6rem; left: .6rem; width: auto; height: auto;
  clip-path: none; background: var(--ink); color: var(--white);
  padding: .55rem 1rem; border-radius: 4px; z-index: 300;
}

/* ── shared editorial primitives ── */
.ed-kicker {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 1rem;
}
.ed-display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: .9;
}
.ed-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1.6rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: 2px;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.ed-btn:hover { background: transparent; color: var(--ink); }
[data-theme="dark"] .ed-btn { border-color: var(--white); background: var(--white); color: var(--ink); }
[data-theme="dark"] .ed-btn:hover { background: transparent; color: var(--white); }
.ed-btn--ghost { background: transparent; color: var(--ink); }
.ed-btn--ghost:hover { background: var(--ink); color: var(--white); }
[data-theme="dark"] .ed-btn--ghost { color: var(--white); }
[data-theme="dark"] .ed-btn--ghost:hover { background: var(--white); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}