/* ==========================================================================
   Design tokens, reset and base typography.
   Everything else in styles/ builds on this file, so load it first.
   ========================================================================== */

:root{
  /* Surfaces, darkest to lightest */
  --bg:#0a0a0a;
  --bg-2:#111;
  --bg-3:#1a1a1a;

  /* Text */
  --ink:#f5f5f5;
  --ink-dim:#8a8a8a;

  /* Borders and brand */
  --line:#262626;
  --accent:#e63946;
  --accent-2:#ffb703;
  --danger:#c92e3a;

  /* Layout */
  --max:1280px;
  --gutter:28px;
  --gutter-sm:20px;

  /* Type families */
  --font-body:'Manrope',sans-serif;
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-serif:'Instrument Serif',serif;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Respect users who ask the OS to reduce motion. The ticker, pulse dots and
   page-fade are decorative, so there is nothing lost by holding them still. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ---------- Type roles ---------- */
.display{
  font-family:var(--font-display);
  font-weight:500;letter-spacing:-.025em;line-height:1;text-transform:none;
}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:400}

/* ---------- Shared animations ---------- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Visible only to screen readers — used for live-region status messages. */
.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;
}