/* Dead Filth v2 tokens. This is the entire palette. Do not add to it.
   Merged from design_system/tokens/*.css in the design handoff.
   Fonts are self hosted rather than called from Google, per CLAUDE.md. */

@font-face {
  font-family: "IM Fell DW Pica";
  src: url("../assets/fonts/im-fell-dw-pica-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IM Fell DW Pica";
  src: url("../assets/fonts/im-fell-dw-pica-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}

:root {
  /* base palette */
  --ink:         #0a0806;
  --cream:       #EBE5C2;
  --night:       #0a0d18;
  --navy:        #0f2756;
  --navy-2:      #1a3470;
  --navy-deep:   #06102a;
  --steel:       #3b6693;
  --lavender:    #c5bfe0;
  --lavender-2:  #a9a2cc;
  --grey-1:      #8a8a92;
  --grey-2:      #c0c0c6;
  --grey-3:      #4a4a52;
  --shadow:      rgba(0,0,0,0.85);

  /* semantic aliases */
  --bg-page:      var(--ink);
  --bg-scene:     var(--night);
  --bg-plate:     var(--cream);
  --text-body:    var(--cream);
  --text-quiet:   var(--grey-2);
  --text-faint:   var(--grey-1);
  --text-label:   var(--lavender-2);
  --text-on-plate: var(--ink);
  --accent:       var(--lavender);
  --accent-deep:  var(--navy);
  --line:         rgba(235,229,194,0.15);
  --line-strong:  rgba(235,229,194,0.4);
  --line-on-plate: rgba(10,8,6,0.55);
  --focus-ring:   var(--lavender);

  /* type */
  --font-display: "IM Fell DW Pica", "Times New Roman", serif;
  --font-ui:      "Inter", ui-sans-serif, system-ui, sans-serif;
  --size-display-1: clamp(44px, 9vw, 104px);
  --size-display-2: clamp(34px, 6vw, 64px);
  --size-display-3: clamp(26px, 4vw, 40px);
  --lh-display: 0.98;
  --ls-display: 0.01em;
  --size-body:    15px;
  --size-body-sm: 13.5px;
  --size-label:   11px;
  --size-price:   13px;
  --lh-body:  1.65;
  --ls-label: 0.34em;
  --ls-nav:   0.26em;
  --ls-price: 0.18em;

  /* space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 18px;
  --space-5: 26px; --space-6: 40px; --space-7: 64px; --space-8: 96px;
  --gutter: 22px;
  --tap-min: 44px;

  /* surfaces */
  --radius: 0px;
  --border-hair: 1px solid var(--line);
  --shadow-drop:  0 24px 60px var(--shadow);
  --shadow-plate: 0 10px 30px rgba(0,0,0,0.7);
  --vignette: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.95) 100%);
  --grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
  --grain-opacity: 0.26;

  /* motion */
  --ease-heavy: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   0.25s;
  --dur-hover:  0.35s;
  --dur-frame:  0.6s;
  --dur-reveal: 1.1s;
  --perspective: 1400px;
}

@media (min-width: 900px) {
  :root { --gutter: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.001s; --dur-hover: 0.001s;
    --dur-frame: 0.001s; --dur-reveal: 0.001s;
  }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}