/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ===== DESIGN TOKENS — John Wick Cinematic Noir ===== */
:root {
  /* Dark Mode (default) */
  --bg:           #0a0a0f;
  --surface:      #111118;
  --surface-2:    #16161f;
  --surface-offset: #1a1a25;
  --text:         #e8e6e3;
  --text-muted:   #8a8889;
  --text-faint:   #555456;
  --accent-gold:  #c9a84c;
  --accent-blue:  #3d6b8e;
  --accent-red:   #8b2525;
  --divider:      #222230;
  --border:       #2a2a38;

  /* Typography Scale (clamp) */
  --text-xs:    clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --text-sm:    clamp(0.8125rem, 0.77rem + 0.2vw, 0.875rem);
  --text-base:  clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);
  --text-lg:    clamp(1.0625rem, 0.98rem + 0.35vw, 1.125rem);
  --text-xl:    clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem);
  --text-2xl:   clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-3xl:   clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-hero:  clamp(2.5rem, 1.5rem + 4vw, 5rem);

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Layout */
  --max-w: 1200px;
  --max-w-prose: 72ch;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Transition */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* Light mode (slightly lighter dark) */
[data-theme="light"] {
  --bg:           #14141c;
  --surface:      #1a1a24;
  --surface-2:    #20202c;
  --surface-offset: #252530;
  --text:         #edebe8;
  --text-muted:   #9a9899;
  --text-faint:   #656466;
  --accent-gold:  #d4b456;
  --accent-blue:  #4a7fa3;
  --accent-red:   #a03030;
  --divider:      #2c2c3a;
  --border:       #35354a;
}

/* ===== BASE STYLES ===== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--text-base);
  color: var(--text);
  background-color: var(--bg);
}

a {
  color: var(--accent-gold);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--accent-blue); }
a:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.15;
  color: var(--text);
  font-weight: 700;
}

p { max-width: var(--max-w-prose); }

img {
  height: auto;
  object-fit: cover;
}

::selection {
  background: rgba(201, 168, 76, 0.3);
  color: var(--text);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--accent-gold);
  color: var(--bg);
  padding: var(--space-2) var(--space-4);
  z-index: 1000;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}