/* ============================================
   THE MERCENARY CHEF — Design Tokens & Reset
   ============================================ */

:root {
  /* ---- Colors ---- */
  --cn-black: #0C0C0C;
  --cn-burgundy: #8B1A1A;
  --cn-burgundy-light: #A52A2A;
  --cn-gold: #C4A35A;
  --cn-gold-muted: #8B7A4A;
  --cn-gold-hover: #B39348;
  --cn-gold-glow: rgba(196, 163, 90, 0.25);
  --cn-cream: #FAF7F2;
  --cn-dark: #1A1714;
  --cn-charcoal: #2A2520;
  --cn-sage: #7A8B6F;
  --cn-white: #FFFFFF;

  /* ---- Typography ---- */
  --cn-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cn-font-body: 'Outfit', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --cn-text-hero: clamp(2.75rem, 5vw + 1rem, 5.5rem);
  --cn-text-h2: clamp(1.875rem, 3vw + 0.5rem, 3.25rem);
  --cn-text-h3: clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --cn-text-h4: clamp(1.1rem, 1.5vw + 0.25rem, 1.35rem);
  --cn-text-body: clamp(0.95rem, 0.5vw + 0.8rem, 1.125rem);
  --cn-text-small: clamp(0.8rem, 0.3vw + 0.7rem, 0.9rem);
  --cn-text-label: clamp(0.7rem, 0.3vw + 0.6rem, 0.8rem);

  /* ---- Spacing (8px base) ---- */
  --cn-space-2xs: 0.25rem;
  --cn-space-xs: 0.5rem;
  --cn-space-sm: 0.75rem;
  --cn-space-md: 1rem;
  --cn-space-lg: 1.5rem;
  --cn-space-xl: 2rem;
  --cn-space-2xl: 3rem;
  --cn-space-3xl: 4rem;
  --cn-space-4xl: 6rem;
  --cn-space-5xl: 8rem;
  --cn-section-py: clamp(4rem, 8vw, 8rem);

  /* ---- Layout ---- */
  --cn-max-width: 1200px;
  --cn-max-width-narrow: 800px;
  --cn-header-height: 80px;
  --cn-border-radius: 4px;
  --cn-border-radius-lg: 8px;

  /* ---- Transitions ---- */
  --cn-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cn-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cn-transition-fast: 200ms ease;
  --cn-transition-base: 400ms var(--cn-ease-out);
  --cn-transition-slow: 800ms var(--cn-ease-out);

  /* ---- Z-Index Scale ---- */
  --cn-z-base: 1;
  --cn-z-cards: 10;
  --cn-z-header: 100;
  --cn-z-mobile-cta: 150;
  --cn-z-mobile-menu: 200;
  --cn-z-overlay: 300;
}

/* ---- Modern Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--cn-cream);
  background-color: var(--cn-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cn-font-heading);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cn-cream);
}

h1 { font-size: var(--cn-text-hero); }
h2 { font-size: var(--cn-text-h2); }
h3 { font-size: var(--cn-text-h3); }
h4 { font-size: var(--cn-text-h4); }

p + p {
  margin-top: var(--cn-space-md);
}

/* ---- Utilities ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only--focusable:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: var(--cn-space-xs) var(--cn-space-md);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--cn-gold);
  color: var(--cn-black);
  z-index: var(--cn-z-overlay);
  font-weight: 600;
}

.text-gold { color: var(--cn-gold); }
.text-muted { color: var(--cn-gold-muted); }
.text-burgundy { color: var(--cn-burgundy); }
.text-sage { color: var(--cn-sage); }