/* ===================================================================
   ARCADE TERMINAL SKIN
   Activates when html[data-design="arcade"] is set via JS.
   Overrides Chalkline (cl-*) CSS variables with retro terminal aesthetics:
   phosphor green, JetBrains Mono body, VT323 display, CRT scanlines.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---- Dark Arcade (default when arcade mode is on) ---- */
html[data-design="arcade"] {
  /* Backgrounds */
  --cl-paper:   #0b0f1a;   /* void — main background */
  --cl-paper-2: #0e1424;   /* panel / card background */

  /* Text */
  --cl-ink:       #d6f5e0;           /* primary text (light phosphor) */
  --cl-ink-soft:  rgba(214,245,224,0.80);
  --cl-ink-mute:  #7aa089;           /* secondary / meta text */
  --cl-ink-faint: rgba(74,106,88,0.35);

  /* Accent — phosphor green replaces Chalkline lime */
  --cl-lime:     #22ff94;
  --cl-lime-ink: #0b0f1a;   /* text on phosphor bg */

  /* Danger */
  --cl-alert:     #ff3d7f;
  --cl-alert-ink: #0b0f1a;

  /* Borders — dashed terminal style */
  --cl-rule:        #22ff94;
  --cl-hairline:    rgba(34,255,148,0.20);
  --cl-border-hair: 1px dashed rgba(34,255,148,0.25);
  --cl-border:      1px dashed rgba(34,255,148,0.35);
  --cl-border-thick: 2px solid rgba(34,255,148,0.50);

  /* Shadows become glows */
  --cl-shadow-0: none;
  --cl-shadow-1: 0 0 14px rgba(34,255,148,0.22);
  --cl-shadow-2: 0 0 28px rgba(34,255,148,0.32);

  /* Fonts */
  --cl-font-display: "VT323", ui-monospace, monospace;
  --cl-font-body:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cl-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- Light Arcade (paper terminal — activated by theme toggle) ---- */
html[data-design="arcade"][data-theme="light"] {
  --cl-paper:   #ede9dc;
  --cl-paper-2: #e3dfd1;

  --cl-ink:       #0c1a14;
  --cl-ink-soft:  rgba(12,26,20,0.80);
  --cl-ink-mute:  #4a5d52;
  --cl-ink-faint: rgba(138,152,144,0.35);

  --cl-lime:     #0a7a44;
  --cl-lime-ink: #ede9dc;

  --cl-rule:        #0a7a44;
  --cl-hairline:    rgba(10,122,68,0.20);
  --cl-border-hair: 1px dashed rgba(10,122,68,0.30);
  --cl-border:      1px dashed rgba(10,122,68,0.40);
  --cl-border-thick: 2px solid rgba(10,122,68,0.55);

  --cl-shadow-0: none;
  --cl-shadow-1: none;
  --cl-shadow-2: none;
}

/* ---- CRT Scanline overlay (dark mode only) ---- */
html[data-design="arcade"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.032) 0 2px,
    rgba(0,0,0,0) 2px 4px
  );
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 9999;
}
html[data-design="arcade"][data-theme="light"] body::after {
  display: none;
}

/* ---- Body font ---- */
html[data-design="arcade"] body {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- Hero & display text: VT323 with phosphor glow ---- */
html[data-design="arcade"] .cl-hero,
html[data-design="arcade"] .cl-display,
html[data-design="arcade"] h1 {
  font-family: "VT323", ui-monospace, monospace;
  font-weight: 400;
  text-shadow: 0 0 18px rgba(34,255,148,0.50);
  letter-spacing: 0.02em;
}
html[data-design="arcade"][data-theme="light"] .cl-hero,
html[data-design="arcade"][data-theme="light"] .cl-display,
html[data-design="arcade"][data-theme="light"] h1 {
  text-shadow: none;
}

/* ---- Brand logo glow ---- */
html[data-design="arcade"] .cl-brand {
  font-family: "VT323", ui-monospace, monospace;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgba(34,255,148,0.55);
}
html[data-design="arcade"][data-theme="light"] .cl-brand {
  text-shadow: none;
}

/* ---- Links: dashed underline ---- */
html[data-design="arcade"] a {
  text-decoration: none;
  border-bottom: 1px dashed rgba(34,255,148,0.45);
}
html[data-design="arcade"] a:hover {
  border-bottom-style: solid;
}
html[data-design="arcade"] .cl-nav a,
html[data-design="arcade"] .cl-brand {
  border-bottom: none;
}

/* ---- Nav: terminal border ---- */
html[data-design="arcade"] .cl-nav {
  border-bottom: 1px dashed rgba(34,255,148,0.30);
}

/* ---- Buttons: phosphor glow on hover ---- */
html[data-design="arcade"] .cl-btn:hover {
  box-shadow: 0 0 16px rgba(34,255,148,0.40);
}

/* ---- Cards: dashed terminal border ---- */
html[data-design="arcade"] .cl-card {
  border: 1px dashed rgba(34,255,148,0.30);
}

/* ---- Code: phosphor on dark inset ---- */
html[data-design="arcade"] code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: #22ff94;
  background: rgba(7,10,18,0.80);
}
html[data-design="arcade"] pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: #070a12;
  border: 1px dashed rgba(34,255,148,0.30);
}

/* ---- Heading prefixes in reading/prose context ---- */
html[data-design="arcade"] .cl-prose h2::before {
  content: "## ";
  color: rgba(34,255,148,0.55);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75em;
}
html[data-design="arcade"] .cl-prose h3::before {
  content: "### ";
  color: rgba(34,255,148,0.45);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75em;
}

/* ---- Typewriter cursor (homepage hero, arcade mode only) ---- */
html[data-design="arcade"] .cl-cursor {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  background: #22ff94;
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: cl-blink 1s steps(1) infinite;
}
@keyframes cl-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-design="arcade"] .cl-cursor { animation: none; }
}