/* ═══════════════════════════════════════════════════
   GLOBAL — JABSystems.io
   Shared across all pages. Page-specific styles stay
   inline in each HTML file.
   ═══════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─── */
:root {
  --black: #0F0F0F;
  --black-light: #1A1A1A;
  --surface: #1E1E1E;
  --surface-hover: #2A2A2A;
  --red: #FF4D4D;
  --red-bright: #FF6B6B;
  --red-dim: rgba(255, 77, 77, 0.15);
  --cream: #E0E0E0;
  --cream-dim: #888888;
  --white: #FFFFFF;
  --gray: #666;
  --gray-light: #999;
  --green: #27ae60;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', -apple-system, sans-serif;
}

/* ─── RESET ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a { color: inherit; text-decoration: none; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* ─── BASE BODY ─── */
body {
  background-color: var(--black);
  /* Grain tiles with the page (no fixed overlay) — fixed full-viewport layers
     caused WebKit mobile scroll compositing to paint black. */
  background-image:
    repeating-linear-gradient(
      52deg,
      rgba(245, 240, 234, 0.018) 0 0.45px,
      transparent 0.45px 3px
    ),
    repeating-linear-gradient(
      -38deg,
      rgba(255, 255, 255, 0.012) 0 0.4px,
      transparent 0.4px 2.8px
    );
  color: var(--cream);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── SELECTION ─── */
::selection {
  background: var(--red);
  color: var(--white);
}

/* ─── STRUCTURAL RULES ─── */
.top-rule {
  height: 4px;
  background: var(--red);
}

.bottom-rule {
  height: 4px;
  background: var(--red);
}