/* ══════════════════════════════════════════════════════════════════════
   VELOX CORE — shared design system
   Imported by every Velox page. Contains only design tokens and universal
   primitives. Page-specific layout and components stay in each page's own
   stylesheet or inline <style>.

     Palette : amber phosphor on warm near-black
     Display : Archivo (neogrotesque, 400–900)
     Mono    : JetBrains Mono (technical data, labels, timestamps)
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces (darkest → lightest) */
  --void:       #060706;
  --graphite:   #0d100e;
  --carbon:     #141814;
  --steel:      #1c211c;
  --panel:      #232821;
  --rule:       #2a3028;
  --rule-br:    #3a4138;

  /* Ink (text, brightest → dimmest) */
  --ink:        #ece8dd;
  --ink-2:      #b8b2a2;
  --ink-3:      #706a5b;
  --ink-4:      #4a4639;

  /* Accents */
  --amber:      #ffb30a;
  --amber-d:    #c88600;
  --amber-glow: rgba(255, 179, 10, 0.55);
  --phos:       #6fff9a;   /* success / up */
  --crimson:    #ff4a5c;   /* danger / down */
  --cobalt:     #4a84ff;
  --violet:     #c3a0ff;
  --teal:       #3dd4ae;
  --orange:     #ff9800;

  /* Typography */
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ══════ RESET ══════ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a      { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

::selection { background: var(--amber); color: #0c0b08; }

::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--graphite); }
::-webkit-scrollbar-thumb { background: var(--rule-br); border-radius: 0; }

/* ══════ BLUEPRINT BACKGROUND ══════
   Fixed-position grid that sits behind all page content.
   Add <div class="grid-bg"></div> as the first child of <body>. */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 179, 10, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 179, 10, 0.025) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 90%);
}
