/* ============================================================
   catmouse.io — Brand tokens
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Caveat:wght@500;700&display=swap");

:root {
  /* ─── Palette ─────────────────────────────────────────────── */

  /* Terminal greens (our signal color) — phosphor CRT */
  --cm-green-50:  #e9ffec;
  --cm-green-100: #c6ffce;
  --cm-green-200: #8dffa5;
  --cm-green-300: #5eff9c;   /* primary */
  --cm-green-400: #2fd47a;
  --cm-green-500: #14b864;
  --cm-green-600: #0d8a4a;
  --cm-green-700: #075c32;
  --cm-green-800: #073b22;
  --cm-green-900: #052013;

  /* Terminal blacks — warm off-black with green tint */
  --cm-ink-50:   #f6f7f3;
  --cm-ink-100:  #e7eae1;
  --cm-ink-200:  #c9cfbf;
  --cm-ink-300:  #8e9a83;
  --cm-ink-400:  #5f6c55;
  --cm-ink-500:  #3a4535;
  --cm-ink-600:  #252d22;
  --cm-ink-700:  #171d15;
  --cm-ink-800:  #0f130e;
  --cm-ink-900:  #0a0f0a;   /* page background */
  --cm-ink-950:  #050805;

  /* Magenta — alarm / "busted" / danger */
  --cm-mag-300:  #ff6cbf;
  --cm-mag-400:  #ff2e9a;   /* primary accent */
  --cm-mag-500:  #e31580;
  --cm-mag-700:  #8a0b4c;

  /* Acid yellow — highlighter, legal pad */
  --cm-acid-300: #f9ff7c;
  --cm-acid-400: #f5ff3c;   /* primary */
  --cm-acid-500: #d6e00f;
  --cm-acid-700: #7d8200;

  /* Cyber-purple — secondary, "processing" */
  --cm-purple-300: #c4b5fd;
  --cm-purple-400: #a78bfa;
  --cm-purple-500: #8b5cf6;
  --cm-purple-700: #5b21b6;

  /* Cream / paper — dossier mode, inverted surfaces */
  --cm-paper-50:  #fbf7ec;
  --cm-paper-100: #f4ecd8;   /* cream */
  --cm-paper-200: #e8dcb7;
  --cm-paper-300: #d4c088;
  --cm-paper-400: #a89463;
  --cm-paper-500: #7a6841;

  /* ─── Semantic roles ──────────────────────────────────────── */
  --cm-bg:           var(--cm-ink-900);
  --cm-bg-elev:      var(--cm-ink-800);
  --cm-bg-sunken:    var(--cm-ink-950);
  --cm-surface:      var(--cm-ink-700);
  --cm-surface-hi:   var(--cm-ink-600);
  --cm-border:       var(--cm-ink-600);
  --cm-border-hi:    var(--cm-ink-500);
  --cm-text:         var(--cm-ink-50);
  --cm-text-dim:     var(--cm-ink-300);
  --cm-text-faint:   var(--cm-ink-400);
  --cm-primary:      var(--cm-green-300);
  --cm-primary-hi:   var(--cm-green-200);
  --cm-accent:       var(--cm-mag-400);
  --cm-warn:         var(--cm-acid-400);
  --cm-info:         var(--cm-purple-400);
  --cm-danger:       var(--cm-mag-400);

  /* ─── Typography ──────────────────────────────────────────── */
  --cm-font-mono:    'JetBrains Mono', 'Berkeley Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --cm-font-sans:    'Space Grotesk', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --cm-font-hand:    'Caveat', 'Bradley Hand', cursive;
  --cm-font-display: 'Space Grotesk', system-ui, sans-serif;

  /* Type scale (fluid-ish) */
  --cm-text-xs:   0.6875rem;  /* 11px */
  --cm-text-sm:   0.8125rem;  /* 13px */
  --cm-text-base: 0.9375rem;  /* 15px */
  --cm-text-lg:   1.0625rem;  /* 17px */
  --cm-text-xl:   1.25rem;    /* 20px */
  --cm-text-2xl:  1.5rem;
  --cm-text-3xl:  2rem;
  --cm-text-4xl:  2.75rem;
  --cm-text-5xl:  3.75rem;
  --cm-text-6xl:  5rem;
  --cm-text-7xl:  6.5rem;

  /* ─── Spacing / radius ─────────────────────────────────────── */
  --cm-radius-sm:  4px;
  --cm-radius:     8px;
  --cm-radius-lg:  14px;
  --cm-radius-xl:  20px;

  --cm-ring:  0 0 0 1px var(--cm-border);
  --cm-glow-green:   0 0 24px -6px var(--cm-green-400), 0 0 1px var(--cm-green-300);
  --cm-glow-magenta: 0 0 24px -6px var(--cm-mag-400), 0 0 1px var(--cm-mag-400);
  --cm-glow-acid:    0 0 18px -4px var(--cm-acid-400);

  /* Shadows — most of our depth is rings + glow, not drop shadows */
  --cm-shadow-sm: 0 1px 0 rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
  --cm-shadow:    0 4px 20px rgba(0,0,0,.4);
  --cm-shadow-lg: 0 20px 60px rgba(0,0,0,.5);
}

/* ─── Base resets + ambience ─────────────────────────────────── */
html, body {
  background: var(--cm-bg);
  color: var(--cm-text);
  font-family: var(--cm-font-sans);
  font-size: var(--cm-text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* Subtle scanline ambience — only on .cm-scanlines wrappers */
.cm-scanlines {
  position: relative;
}
.cm-scanlines::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(94, 255, 156, 0.025) 3px,
    rgba(94, 255, 156, 0.025) 4px
  );
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Grain texture for paper surfaces */
.cm-paper {
  background: var(--cm-paper-100);
  color: var(--cm-ink-900);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.04) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.03) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 120px 120px, 80px 80px, 200px 200px;
}

/* Terminal cursor blink */
@keyframes cm-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.cm-cursor::after {
  content: '▊';
  color: var(--cm-primary);
  animation: cm-blink 1s steps(2) infinite;
  margin-left: 2px;
}

/* Hand-drawn wobble for sketch UI */
@keyframes cm-wobble {
  0%, 100% { transform: rotate(-0.4deg) translateY(0); }
  50%      { transform: rotate(0.3deg)  translateY(-0.5px); }
}
.cm-sketch { animation: cm-wobble 4s ease-in-out infinite; }

/* Marquee for the "ticker" in page headers */
@keyframes cm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Scrollbar */
.cm-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.cm-scroll::-webkit-scrollbar-track { background: var(--cm-ink-800); }
.cm-scroll::-webkit-scrollbar-thumb {
  background: var(--cm-ink-600);
  border: 2px solid var(--cm-ink-800);
  border-radius: 6px;
}
.cm-scroll::-webkit-scrollbar-thumb:hover { background: var(--cm-green-700); }

/* Selection */
::selection { background: var(--cm-green-300); color: var(--cm-ink-900); }

/* Focus visibility */
:focus-visible { outline: 2px dashed var(--cm-green-300); outline-offset: 3px; }