/* Project Norn Web — palette + base CSS variables.
 *
 * This file is the single source of truth for the color palette. Every
 * other CSS file imports it via @import url("./palette.css") and uses
 * the variables defined here. Do not introduce hard-coded colors anywhere
 * else in the project.
 *
 * Palette derived from the existing black/red CRT aesthetic. Per Q5 lock:
 * green appears ONLY in .status-dot.online for the existing online
 * indicator semantic. All chrome accents stay in red/black/gray.
 */

:root {
  /* Reds */
  --red-primary: #e01030;
  --red-glow:    #ff1a3d;
  --red-dark:    #8b0a1e;
  --red-dim:     #3a0a12;

  /* Blacks (background, surfaces) */
  --black-deep:    #0a0a0c;
  --black-card:    #111115;
  --black-surface: #18181e;
  --black-recess:  #050507;  /* one shade darker than black-deep, for inset blocks */

  /* Grays (borders, text) */
  --gray-line:  #2a2a32;
  --gray-text:  #6a6a78;
  --gray-light: #9a9aaa;

  /* White (high-contrast text) */
  --white: #e8e8f0;

  /* Status indicator green — ONLY use in .status-dot.online + healthy
     metric dots. Never use as a chrome accent. Per Q5 lock. */
  --green-online: #22c55e;

  /* Type scale */
  --font-orbitron:    'Orbitron', sans-serif;
  --font-sharetech:   'Share Tech Mono', monospace;
  --font-rajdhani:    'Rajdhani', sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Breakpoints — mobile drawer is v1.0c, but the variable is reserved */
  --breakpoint-mobile: 768px;
}

/* Global resets that every page inherits */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--black-deep);
  color: var(--white);
  font-family: var(--font-rajdhani);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--red-glow); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Scanline overlay (carries the existing index.html aesthetic) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Background grid */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--gray-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--gray-line) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}