@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/raleway-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/raleway-latin-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/raleway-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Rubik Dirt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rubik-dirt-latin-400-normal.woff2') format('woff2');
}

@layer reset, tokens, base;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
  img, video { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  button, input, textarea, select { font: inherit; }
  button { cursor: pointer; border: none; background: none; }
  h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; }
}

@layer tokens {
  :root {
    --cream: #FDF6D9;
    --cream-light: #FFFBEF;
    --cream-mid: #EFDFAF;
    --olive: #0E0E0E;
    --olive-mid: #24231D;
    --olive-light: #4B4638;
    --gold: #E0C193;
    --gold-light: #EBD3AE;
    --gold-pale: #F4E6C7;
    --rust: #8B4513;
    --rust-light: #A0522D;
    --sand: #C6A978;
    --sand-light: #D9C29E;

    --ff-main: 'Raleway', sans-serif;
    --ff-display: 'Rubik Dirt', cursive;

    --fs-xs: clamp(0.7rem, 1vw, 0.8rem);
    --fs-sm: clamp(0.82rem, 1.2vw, 0.9rem);
    --fs-base: clamp(0.9rem, 1.5vw, 1rem);
    --fs-md: clamp(1rem, 1.8vw, 1.125rem);
    --fs-lg: clamp(1.1rem, 2.2vw, 1.35rem);
    --fs-xl: clamp(1.3rem, 3vw, 1.75rem);
    --fs-2xl: clamp(1.6rem, 4vw, 2.4rem);
    --fs-3xl: clamp(2rem, 5.5vw, 3.2rem);
    --fs-4xl: clamp(2.4rem, 7vw, 4rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(44,42,30,0.10);
    --shadow-md: 0 4px 20px rgba(44,42,30,0.14);
    --shadow-lg: 0 8px 40px rgba(44,42,30,0.18);

    --transition-fast: 180ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    --nav-h: 92px;
    --max-w: 1280px;
    --max-w-narrow: 860px;
    --max-w-wide: 1440px;
  }
}

@layer base {
  html, body {
    font-family: var(--ff-main);
    font-size: var(--fs-base);
    color: var(--olive);
    background-color: var(--cream);
    background-image: radial-gradient(circle at top left, rgba(224,193,147,0.22), transparent 28%);
    line-height: 1.65;
    min-height: 100vh;
  }

  ::selection {
    background: var(--gold-pale);
    color: var(--olive);
  }

  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  h1 { font-size: var(--fs-4xl); letter-spacing: -0.02em; }
  h2 { font-size: var(--fs-3xl); letter-spacing: -0.015em; }
  h3 { font-size: var(--fs-2xl); }
  h4 { font-size: var(--fs-xl); }
  h5 { font-size: var(--fs-lg); }
  h6 { font-size: var(--fs-md); }

  p { font-size: var(--fs-base); line-height: 1.7; }

  strong { font-weight: 700; }
  em { font-style: italic; }

  a:hover { color: var(--gold); }

  hr {
    border: none;
    border-top: 1px solid var(--cream-mid);
    margin-block: var(--space-8);
  }

  main { padding-top: var(--nav-h); }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }
}