/* ══════════════════════════════════════════
   TOKENS — Blueprint Light
   css/tokens.css
══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Bebas+Neue&display=swap');

:root {
  /* Backgrounds — clean blueprint paper */
  --bg0:    #FFFFFF;
  --bg1:    #F2F6FC;   /* page bg — cool off-white */
  --bg2:    #E8EFF9;   /* cards, panels */
  --bg3:    #DCE7F5;   /* elevated / hover */

  /* Brand blues — vivid, high-contrast on light */
  --blue:      #1A7FE8;   /* rich primary */
  --blue-hi:   #0062CC;   /* deep for headings/accents */
  --blue-lo:   #4FA3F5;   /* lighter tint */
  --blue-dim:  #C2D9F5;   /* very pale wash */
  --blue-glow: rgba(26, 127, 232, 0.16);
  --blue-line: rgba(26, 127, 232, 0.22);
  --blue-faint:rgba(26, 127, 232, 0.08);

  /* Text — dark ink on light */
  --t1: #07152A;   /* primary — deep navy-black */
  --t2: #2E4D70;   /* secondary */
  --t3: #6E90B4;   /* muted */
  --t4: #B0C8E0;   /* ghost */

  /* Grid */
  --grid-line: rgba(26, 127, 232, 0.08);
  --tick: rgba(26, 127, 232, 0.22);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg1);
  color: var(--t1);
  cursor: none;
  overflow-x: hidden;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-attachment: fixed;
}

body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.7) 0%, transparent 70%);
}