/* ═══════════════════════════════════════════════════════════
   core.css — Variables, Reset, Typography, CRT, Scrollbars
   Callisto OS // ARCNET Terminal v2.0
   ═══════════════════════════════════════════════════════════ */

/* ── Color System ── */
:root {
  --bg:           #0a0e14;
  --bg-surface:   #0d1117;
  --bg-inset:     #080b10;
  --border:       #1a2332;
  --border-glow:  #1e3a5f;
  --text:         #d4e5f7;
  --text-dim:     #5a7a9b;
  --accent:       #00d4ff;
  --accent-glow:  rgba(0, 212, 255, .35);
  --accent-dim:   #0a6e8a;
  --highlight:    #2de2e6;
  --success:      #4ade80;
  --warning:      #f0b232;
  --error:        #f05050;
  --magenta:      #f72585;

  /* Spacing & sizing */
  --gap:          8px;
  --pad:          12px;
  --radius:       6px;
  --radius-lg:    10px;

  /* Zone sizes */
  --left-w:       320px;
  --right-w:      280px;
  --bottom-h:     clamp(260px, 30vh, 340px);

  /* Typography */
  --font-mono:    "Share Tech Mono", ui-monospace, "Cascadia Mono", "Fira Code", Consolas, monospace;
  --font-size:    14px;

  /* Effects */
  --glow:         0 0 8px var(--accent-glow), 0 0 20px rgba(0, 212, 255, .12);
  --glow-subtle:  0 0 6px rgba(0, 212, 255, .15);
  --glow-text:    0 0 8px rgba(0, 212, 255, .5);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: var(--font-size)/1.5 var(--font-mono);
  letter-spacing: .4px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── CRT Scanline Overlay ── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, .06) 2px,
      rgba(0, 0, 0, .06) 4px
    );
  mix-blend-mode: overlay;
}

/* ── CRT Vignette ── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8999;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, .45) 100%
  );
}

/* ── Typography Utilities ── */
.text-accent { color: var(--accent); }
.text-dim    { color: var(--text-dim); }
.text-warn   { color: var(--warning); }
.text-err    { color: var(--error); }
.text-ok     { color: var(--success); }
.text-glow   { color: var(--accent); text-shadow: var(--glow-text); }

/* ── Section Titles (eDEX dashed-border style) ── */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px 0;
  margin-bottom: 6px;
  font-size: .78rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px dashed var(--border);
}

.section-title::before,
.section-title::after {
  content: "";
  flex: 0 0 6px;
  height: 1px;
  background: var(--accent-dim);
}

.section-title span {
  white-space: nowrap;
}

/* ── Links ── */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--highlight); text-decoration: underline; }

/* ── Selection ── */
::selection {
  background: rgba(0, 212, 255, .25);
  color: #fff;
}

/* ── Scrollbars ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 212, 255, .4) rgba(0, 212, 255, .06);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track {
  background: rgba(0, 212, 255, .04);
  border: 1px solid var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0, 212, 255, .5), rgba(0, 212, 255, .25));
  border: 1px solid var(--border-glow);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(0, 212, 255, .7), rgba(0, 212, 255, .4));
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}