/* Matrix Design Tokens - Shared across all frameworks */

:root {
  /* Primary Palette */
  --matrix-green: #00ff41;
  --matrix-dark: #008f11;
  --matrix-glow: #39ff14;
  --void: #000000;
  --white-core: #ffffff;

  /* Typography */
  --font-mono: 'Share Tech Mono', monospace;

  /* Shadows */
  --glow-sm: 0 0 10px rgba(0, 255, 65, 0.5);
  --glow-md: 0 0 20px rgba(0, 255, 65, 0.5);
  --glow-lg: 0 0 40px rgba(0, 255, 65, 0.7);

  /* Animations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* Glow text utility */
.glow-text {
  text-shadow: 0 0 10px var(--matrix-green),
               0 0 20px var(--matrix-green),
               0 0 30px var(--matrix-green);
}

/* Cursor blink */
.cursor {
  display: inline-block;
  width: 10px;
  height: 1.2em;
  background-color: var(--matrix-green);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Pulse glow */
@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 10px var(--matrix-green), 0 0 20px var(--matrix-green); }
  50% { text-shadow: 0 0 20px var(--matrix-green), 0 0 40px var(--matrix-green), 0 0 60px var(--matrix-green); }
}

/* Scanlines overlay */
.scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 10;
}

/* ============================================================
   MATRIX — extended tokens (added for the HTML template)
   Everything below extends the shared palette above so the
   canonical HTML/CSS pages have spacing, surfaces, lines and
   layout primitives to draw on. Green-on-black, monospace.
   ============================================================ */
:root {
  /* ---- Surfaces (near-black with a faint green tint) ---- */
  --panel: #040a05;          /* card / raised surface */
  --panel-2: #081208;        /* alt section / dropdown */
  --panel-3: #0c180c;        /* hover / elevated */
  --overlay: rgba(0, 8, 2, 0.92);

  /* ---- Green line work (hairlines + glow edges) ---- */
  --line: rgba(0, 255, 65, 0.28);
  --line-faint: rgba(0, 255, 65, 0.14);
  --line-strong: rgba(0, 255, 65, 0.55);

  /* ---- Text ramp (green phosphor) ---- */
  --text: #b9ffc9;           /* body copy — soft phosphor green */
  --text-bright: #d9ffe2;    /* emphasis */
  --text-dim: #3ea655;       /* secondary / muted */
  --text-mute: #1f6b32;      /* faint / disabled */

  /* ---- Signature gradient / glows ---- */
  --matrix-gradient: linear-gradient(135deg, #00ff41 0%, #39ff14 100%);
  --glow-pulse: 0 0 20px rgba(0, 255, 65, 0.35), 0 0 60px rgba(0, 255, 65, 0.15);
  --glow-radial: radial-gradient(ellipse at 50% 40%, rgba(0, 255, 65, 0.12) 0%, transparent 55%);

  /* ---- Typography aliases (all monospace) ---- */
  --font-sans: 'Share Tech Mono', ui-monospace, monospace;
  --font-display: 'Share Tech Mono', ui-monospace, monospace;

  /* ---- Layout ---- */
  --container: 72rem;         /* 1152px */
  --container-narrow: 48rem;
  --radius: 0;                /* terminal = sharp corners */
  --hairline: 1px;

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 500ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ---- Faint grid background (terminal graph paper) ---- */
  --grid-pattern: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2300ff41' stroke-opacity='0.06' stroke-width='0.5'%3E%3Cpath d='M40 0H0V40'/%3E%3C/g%3E%3C/svg%3E");
}