/* ============================================================
   iRage Research — design tokens
   The logo is a lattice of blue squares with exactly one orange.
   That rule governs the whole system: blue is the field, orange
   is the single point of interest. Never two oranges in a view.
   ============================================================ */

@font-face {
  font-family: 'Space Grotesk';
  src: url("/static/fonts/space-grotesk.25ea4a783c12.woff2") format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/static/fonts/jetbrains-mono.782150e6836b.woff2") format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* --- brand ------------------------------------------------ */
  --ir-blue:      #1337F5;   /* primary, straight off the mark */
  --ir-blue-lit:  #3A63FF;
  --ir-cyan:      #1786E5;
  --ir-cyan-lit:  #38B6FF;
  --ir-orange:    #FF6600;   /* the one square */
  --ir-orange-lit:#FF8A3D;

  /* --- ground: deep, cold, near-black ----------------------- */
  --bg-0: #04060D;   /* page */
  --bg-1: #070A14;   /* section */
  --bg-2: #0B1020;   /* card */
  --bg-3: #111832;   /* raised */

  /* --- ink -------------------------------------------------- */
  --ink-0: #EEF2FF;  /* headlines */
  --ink-1: #B9C6EA;  /* body */
  --ink-2: #7F8FBA;  /* secondary */
  --ink-3: #6B7BA6;  /* faint / axis labels */
  --ink-label: #9FB0D8;  /* small mono labels — letterspaced caps need more
                            contrast than body text at the same size */

  /* --- lines ------------------------------------------------ */
  --line-0: rgba(126, 152, 232, 0.10);
  --line-1: rgba(126, 152, 232, 0.18);
  --line-2: rgba(126, 152, 232, 0.32);
  --grid:   rgba(102, 132, 220, 0.055);

  /* --- semantic --------------------------------------------- */
  --up:   #17C98A;
  --down: #F2495C;
  --warn: #F2B23E;

  /* --- glow ------------------------------------------------- */
  --glow-blue: 0 0 0 1px rgba(19, 55, 245, .35), 0 0 32px -6px rgba(19, 55, 245, .55);
  --glow-cyan: 0 0 40px -10px rgba(23, 134, 229, .6);

  /* --- type ------------------------------------------------- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* fluid display sizes */
  --t-hero:  clamp(2.6rem, 5.2vw, 4.6rem);
  --t-h2:    clamp(1.9rem, 3.4vw, 3.1rem);
  --t-h3:    clamp(1.15rem, 1.6vw, 1.45rem);
  --t-body:  clamp(0.95rem, 1.05vw, 1.06rem);
  --t-mono:  0.775rem;
  --t-micro: 0.665rem;

  /* --- geometry --------------------------------------------- */
  --unit: 8px;                 /* the lattice pitch */
  --cell: 44px;                /* background grid cell */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shell: 1280px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}