@layer reset, tokens, base, utilities;

@layer tokens {
  :root {
    color-scheme: dark;

    --ink-950: #090806;
    --ink-900: #120e0a;
    --brown-900: #21160e;
    --brown-700: #4a3320;
    --gold-700: #80602e;
    --gold-500: #c3974c;
    --gold-400: #d4ac67;
    --gold-300: #dfc58f;
    --cream-100: #eee3d1;
    --cream-300: #c3b39c;

    --radius-sm: 2px;
    --radius-md: 6px;
    --radius-lg: 10px;

    --container-max: 1280px;
    --container-gutter: clamp(20px, 5.55vw, 80px);

    --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;

    --font-display: "DIN Condensed", "Avenir Next Condensed", "Arial Narrow", Impact, sans-serif;
    --font-ui: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", sans-serif;
    --font-body: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, sans-serif;

    --ease-out-editorial: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 180ms;
    --duration-medium: 420ms;
    --duration-reveal: 760ms;
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 320px;
    background: var(--ink-950);
    color: var(--cream-100);
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
  }

  body {
    min-height: 100vh;
    margin: 0;
    overflow-x: clip;
  }

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

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

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer base {
  body {
    background: var(--ink-950);
    color: var(--cream-100);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: inherit;
  }

  :focus-visible {
    outline: 2px solid var(--gold-300);
    outline-offset: 4px;
  }

  ::selection {
    background: var(--gold-500);
    color: var(--ink-950);
  }
}

@layer utilities {
  .container {
    width: min(calc(100% - (2 * var(--container-gutter))), var(--container-max));
    max-width: 1280px;
    margin-inline: auto;
  }

  .skip-link {
    position: fixed;
    z-index: 1000;
    inset: 12px auto auto 12px;
    padding: 10px 14px;
    transform: translateY(-180%);
    background: var(--gold-500);
    color: var(--ink-950);
    font-family: var(--font-ui);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

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

@media (max-width: 767px) {
  :root {
    --container-gutter: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}