/* ============================================================
   PCA-TECH DESIGN SYSTEM — TOKENS v1.0
   © 2026 PCA Technology Inc.
   pca-tech.com
   
   Drop into any project. Imports Google Fonts. Sets globals.
   Provides full design token suite as CSS variables.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Background tier ────────────────────────────────── */
  --pca-bg:           #050807;
  --pca-bg-2:         #0a1410;
  --pca-bg-3:         #0f1c16;

  /* ── Phosphor tier (primary brand) ──────────────────── */
  --pca-phosphor:        #00ff66;
  --pca-phosphor-bright: #5cffa0;
  --pca-phosphor-dim:    #4d8a5e;
  --pca-phosphor-deep:   #064a1f;

  /* ── Cyan tier (secondary / interactive) ────────────── */
  --pca-cyan:        #4dd8ff;
  --pca-cyan-dim:    #2a8aab;
  --pca-cyan-deep:   #0a3346;

  /* ── Semantic ───────────────────────────────────────── */
  --pca-amber:      #ffb83d;
  --pca-amber-deep: #4a3a16;
  --pca-red:        #ff2e4a;
  --pca-red-deep:   #4a0f17;

  /* ── Text tier ──────────────────────────────────────── */
  --pca-text:      #c8e6c9;
  --pca-text-dim:  #6b8a72;
  --pca-text-mute: #3e5847;

  /* ── Border tier ────────────────────────────────────── */
  --pca-border:        #143a23;
  --pca-border-bright: #1f6638;
  --pca-border-mute:   #0d1f15;

  /* ── Typography ─────────────────────────────────────── */
  --pca-font-display: 'JetBrains Mono', 'IBM Plex Mono', 'Menlo', monospace;
  --pca-font-body:    'IBM Plex Mono', 'JetBrains Mono', 'Menlo', monospace;
  --pca-font-code:    'JetBrains Mono', 'IBM Plex Mono', 'Menlo', monospace;

  --pca-text-xs:   11px;
  --pca-text-sm:   12px;
  --pca-text-base: 14px;
  --pca-text-lg:   17px;
  --pca-text-xl:   22px;
  --pca-text-2xl:  28px;
  --pca-text-3xl:  38px;
  --pca-text-4xl:  56px;

  /* ── Spacing scale ──────────────────────────────────── */
  --pca-space-1: 4px;
  --pca-space-2: 8px;
  --pca-space-3: 14px;
  --pca-space-4: 20px;
  --pca-space-5: 28px;
  --pca-space-6: 40px;
  --pca-space-7: 60px;
  --pca-space-8: 80px;

  /* ── Radii (kept tight — angular is the brand) ──────── */
  --pca-radius-0: 0;
  --pca-radius-1: 2px;
  --pca-radius-2: 4px;       /* MAX. Anything more breaks the aesthetic. */

  /* ── Shadows (glow, not blur) ───────────────────────── */
  --pca-glow-phosphor:    0 0 12px rgba(0, 255, 102, 0.35);
  --pca-glow-phosphor-lg: 0 0 24px rgba(0, 255, 102, 0.5),
                          inset 0 0 12px rgba(0, 255, 102, 0.08);
  --pca-glow-cyan:        0 0 12px rgba(77, 216, 255, 0.35);
  --pca-glow-amber:       0 0 12px rgba(255, 184, 61, 0.35);
  --pca-glow-red:         0 0 12px rgba(255, 46, 74, 0.35);

  --pca-text-glow:    0 0 4px var(--pca-phosphor), 0 0 12px rgba(0, 255, 102, 0.4);
  --pca-text-glow-lg: 0 0 8px var(--pca-phosphor), 0 0 24px rgba(0, 255, 102, 0.3);
}

/* ============================================================
   BASE RESET (opinionated — assumes you want the full aesthetic)
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background: var(--pca-bg);
  color: var(--pca-text);
  font-family: var(--pca-font-body);
  font-size: var(--pca-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   GLOBAL CRT EFFECTS — scanlines + vignette
   Remove either block to drop the effect.
   ============================================================ */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 102, 0.025) 0,
    rgba(0, 255, 102, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
}

body::after {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
  z-index: 9998;
}

/* ── Optional: moving scan beam. Add <div class="pca-scanbeam"></div> to body. ── */
.pca-scanbeam {
  position: fixed; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(0, 255, 102, 0.04),
    rgba(0, 255, 102, 0.08),
    rgba(0, 255, 102, 0.04),
    transparent);
  animation: pca-scan 8s linear infinite;
  pointer-events: none;
  z-index: 9997;
}

/* ============================================================
   KEYFRAMES (namespaced)
   ============================================================ */
@keyframes pca-scan    { 0% { transform: translateY(-100vh); } 100% { transform: translateY(100vh); } }
@keyframes pca-blink   { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pca-flicker { 0%, 100%, 93% { opacity: 1; } 92%, 94% { opacity: .85; } }
@keyframes pca-pulse   { 0%, 100% { text-shadow: var(--pca-text-glow); } 50% { text-shadow: var(--pca-text-glow-lg); } }
@keyframes pca-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   UTILITY HELPERS (optional — use if you don't have Tailwind)
   ============================================================ */
.pca-cursor {
  display: inline-block;
  background: var(--pca-phosphor);
  width: 0.55em; height: 1em;
  animation: pca-blink 1s step-end infinite;
  vertical-align: text-bottom;
  box-shadow: 0 0 8px var(--pca-phosphor);
}

.pca-glow { text-shadow: var(--pca-text-glow); }
.pca-glow-lg { text-shadow: var(--pca-text-glow-lg); }

a { color: var(--pca-cyan); text-decoration: none; transition: color .15s; }
a:hover { color: var(--pca-phosphor); }

::selection { background: var(--pca-phosphor); color: var(--pca-bg); }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pca-bg); }
::-webkit-scrollbar-thumb { background: var(--pca-border-bright); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--pca-phosphor-dim); }