/* =========================================================
   DESIGN TOKENS
   Edit these to re-brand the entire site: colors, type, spacing.
   ========================================================= */
:root {
  /* --- Color: dark blue base, subtle orange accent --- */
  --bg:            #0A0F1E;
  --panel:         #101A30;
  --panel-alt:     #142038;
  --panel-raised:  #182544;
  --line:          rgba(237, 239, 243, 0.08);
  --line-strong:   rgba(237, 239, 243, 0.16);

  --text:          #EDEFF3;
  --text-dim:      #8B93A7;
  --text-faint:    #565E70;

  --accent:        #D98A54;   /* subtle, muted orange */
  --accent-rgb:    217, 138, 84; /* same color as --accent, as r,g,b for use in rgba() */
  --accent-dim:    #A66A3E;
  --accent-bright: #E8A272;
  --positive:      #4E9F6B;
  --negative:      #C25A4D;

  /* --- Type ---
     Px Grotesk / Px Grotesk Mono are commercial fonts (Pangram Pangram
     Foundry) — they're not embedded here because that requires a paid
     license. Instead, @font-face rules in base.css point at
     assets/fonts/*.woff2 — drop your licensed font files there (see the
     comment above the @font-face block) and they'll be used automatically.
     Until then, the fallback stack below keeps the site looking clean. */
  --font-display: "Px Grotesk", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Px Grotesk Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-mono:    "Px Grotesk Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- Scale --- */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.375rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --step-4:  clamp(2.75rem, 2.2rem + 2.75vw, 4.25rem);
  --step-5:  clamp(3.5rem, 2.6rem + 4.5vw, 6rem);

  /* --- Layout --- */
  --content-max: 1160px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 3px;
  --radius-md: 6px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}