/* ═══════════════════════════════════════
   base.css — Design tokens, reset, typography
   ═══════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --color-bg: #fafaf9;
  --color-bg-alt: #f5f5f4;
  --color-fg: #1c1917;
  --color-fg-muted: #78716c;
  --color-border: #e7e5e4;
  --color-border-dark: #d6d3d1;
  --color-accent: #c2703a;
  --color-accent-dark: #a85d2f;
  --color-sale: #dc2626;
  --color-sale-bg: #fef2f2;
  --color-success: #16a34a;
  --color-white: #ffffff;
  --color-black: #1c1917;

  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --header-h: 56px;
  --announce-h: 36px;
  --max-w: 1280px;
  --max-w-narrow: 960px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-btn: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 190;
  --z-toast: 300;
  --z-modal: 400;
  --z-page-loading: 500;

  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-fg);
  background: var(--color-bg);
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--color-black); color: var(--color-white); }

/* ── Utility ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: var(--max-w-narrow); }
.text-center { text-align: center; }
.text-muted { color: var(--color-fg-muted); }
.text-sale { color: var(--color-sale); }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.15; }
.heading-xl { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.02em; }
.heading-lg { font-size: clamp(1.5rem, 3.5vw, 2.5rem); letter-spacing: -0.01em; }
.heading-md { font-size: clamp(1.125rem, 2vw, 1.5rem); }
.heading-sm { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.heading-xs { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-fg-muted); }

.body-lg { font-size: 1.0625rem; line-height: 1.65; }
.body-sm { font-size: 0.8125rem; line-height: 1.55; }
.body-xs { font-size: 0.6875rem; line-height: 1.45; }

.font-serif { font-family: var(--font-serif); }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.06em; }
.tracking-wider { letter-spacing: 0.1em; }
.tabular { font-variant-numeric: tabular-nums; }
.line-through { text-decoration: line-through; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* ── Layout helpers ── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.wrap { flex-wrap: wrap; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.w-full { width: 100%; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* ── Spacing sections ── */
.section { padding: 60px 0; }
.section--lg { padding: 80px 0; }
.section--sm { padding: 40px 0; }

@media (max-width: 768px) {
  .section { padding: 40px 0; }
  .section--lg { padding: 56px 0; }
}

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(6px); }
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}