/* ==========================================================================
   Raven About — base tokens & reset
   ========================================================================== */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { line-height: 1.5; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

@font-face {
  font-family: "Abridge";
  src: url("./assets/fonts/Abridge%20Complete%20Desktop/Abridge-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Abridge";
  src: url("./assets/fonts/Abridge%20Complete%20Desktop/Abridge-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Round8";
  src: url("./assets/fonts/ROUND%208-FOUR/Webfont/Web%20Font%20Kit/round8-four-webfont.woff2") format("woff2"),
       url("./assets/fonts/ROUND%208-FOUR/Webfont/Web%20Font%20Kit/round8-four-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color — Raven brand: disco black, smoke green, mirror pink, chrome white */
  --ink: #070909;
  --ink-2: #0D1110;
  --ink-3: #151B18;
  --ink-4: #202823;
  --line: rgba(238, 232, 221, 0.16);
  --line-strong: rgba(238, 232, 221, 0.32);

  --paper: #F4F0E8;
  --paper-2: #C8C1B6;
  --paper-3: #8F8980;
  --paper-4: #5E5B55;

  --acid: #FF6D85;
  --acid-dim: #B84B68;
  --signal: #F5A66E;
  --signal-dim: #B56E44;
  --plasma: #B79AFF;
  --danger: #FF5A6A;

  /* Type */
  --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-body: "Manrope", "Inter", system-ui, sans-serif;
  --font-mono: "Manrope", "Inter", system-ui, sans-serif;

  /* Scale (fluid) */
  --text-xs: clamp(13px, 0.78rem + 0.18vw, 15px);
  --text-sm: clamp(15px, 0.86rem + 0.22vw, 17px);
  --text-base: clamp(17px, 0.98rem + 0.26vw, 19px);
  --text-md: clamp(19px, 1.08rem + 0.34vw, 22px);
  --text-lg: clamp(22px, 1.18rem + 0.55vw, 28px);
  --text-xl: clamp(28px, 1.35rem + 1.2vw, 40px);
  --text-2xl: clamp(40px, 2rem + 2vw, 64px);
  --text-3xl: clamp(52px, 3rem + 3.4vw, 92px);
  --text-hero: clamp(64px, 4rem + 5.2vw, 136px);

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --s-10: 128px; --s-11: 160px;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);

  /* Radius */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 20px; --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 520ms;
  --dur-4: 900ms;
}

/* Typography defaults */
body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11", "tnum";
  color: var(--paper);
  background: var(--ink);
  font-size: var(--text-base);
  letter-spacing: 0.005em;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--paper);
}
.mono, code, kbd, samp, .eyebrow, .label {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  font-weight: 700;
  letter-spacing: 0.045em;
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Selection */
::selection { background: var(--acid); color: #070909; }

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--acid); color: #07070A;
  padding: var(--s-3) var(--s-4); font-weight: 600; z-index: 1000;
}
.skip:focus { left: var(--s-3); top: var(--s-3); }

/* Container */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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