/* ==========================================================================
   Keith Site — shared design system (neo-brutalist)
   Mirrors the keithsite portfolio: cream wire-mesh background, thick black
   outlines, hard offset shadows, green + yellow accents, Space Grotesk.

   Loaded LAST on every page. It re-points the legacy colour variables
   (--primary, --dark, --darker, --light, --border ...) to the new palette,
   so older pages inherit the theme automatically.
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   1. Tokens (one theme only — the same values for light/dark)
   -------------------------------------------------------------------------- */
:root,
html,
html:root {
  /* brand */
  --neo-cream: #fefce8;
  --neo-green: #86efac;
  --neo-green-deep: #2ed573;
  --neo-yellow: #fde047;
  --neo-ink: #000;
  --neo-blue: #0077b5;
  --neo-shadow-sm: 3px 3px 0 0 #000;
  --neo-shadow: 6px 6px 0 0 #000;
  --neo-shadow-lg: 8px 8px 0 0 #000;
  --font: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* legacy names -> neo palette */
  --primary: #86efac;  --primary-color: #86efac;
  --primary-dark: #4ade80;  --primary-light: #bbf7d0;
  --accent: #86efac;  --accent-color: #86efac;
  --secondary: #fde047;  --secondary-color: #fde047;
  --highlight: #fde047;  --gold: #fde047;

  --dark: #fefce8;  --dark-bg: #fefce8;  --darker-bg: #fefce8;
  --bg: #fefce8;  --bg-color: #fefce8;  --background-color: #fefce8;
  --bg-light: #fefce8;  --bg-dark: #fefce8;
  --darker: #ffffff;  --card-bg: #ffffff;  --input-bg: #ffffff;
  --code-bg: #ffffff;  --glass-bg: #ffffff;
  --ai-bubble: #ffffff;  --user-bubble: #86efac;  --white: #ffffff;

  --light: #000000;  --light-color: #000000;  --text-color: #000000;
  --text: #000000;  --text-primary: #000000;  --text-dark: #000000;
  --light-text: #000000;  --dark-color: #000000;

  --gray: #4b5563;  --gray-color: #4b5563;  --gray-text: #4b5563;
  --text-secondary: #4b5563;  --text-light: #4b5563;
  --dark-gray: #4b5563;  --medium-gray: #6b7280;  --muted: #4b5563;
  --light-gray: #e5e7eb;

  --border: #000000;  --border-color: #000000;  --card-border: #000000;
  --glass-border: #000000;  --line: #000000;  --frame-color: #000000;

  --shadow: 6px 6px 0 0 #000;  --box-shadow: 6px 6px 0 0 #000;
  --shadow-md: 6px 6px 0 0 #000;  --shadow-sm: 3px 3px 0 0 #000;
  --radius: 16px;  --border-radius: 16px;  --radius-lg: 24px;  --radius-sm: 10px;
  --transition: all .15s ease;

  --success: #16a34a;  --success-color: #16a34a;
  --error: #dc2626;  --error-color: #dc2626;  --danger: #dc2626;  --danger-color: #dc2626;
  --error-bg: #fecaca;  --warning: #f59e0b;  --warning-color: #f59e0b;
}

/* --------------------------------------------------------------------------
   2. Page background — cream + wire mesh + green/yellow glows
   (drawn behind everything with z-index:-1 so no page needs changing)
   -------------------------------------------------------------------------- */
html {
  background-color: var(--neo-cream);
  scroll-behavior: smooth;
}
body {
  background: transparent !important;
  color: #000;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: -32px;
  animation: neo-mesh-drift 20s ease-in-out infinite;
  background-image:
    linear-gradient(to right,  rgba(0,0,0,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.12) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
@keyframes neo-mesh-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(16px, -16px); }
  50% { transform: translate(32px, 0); }
  75% { transform: translate(16px, 16px); }
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 90% 5%,  rgba(134,239,172,.6) 0%, transparent 45%),
    radial-gradient(circle at 5% 95%,  rgba(253,224,71,.5)  0%, transparent 45%);
  pointer-events: none;
  z-index: -1;
  animation: neo-glow-breathe 4s ease-in-out infinite alternate;
}
@keyframes neo-glow-breathe {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 1;  transform: scale(1.08); }
}

::selection { background: var(--neo-yellow); color: #000; }
:focus-visible { outline: 4px solid #000; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */
body { font-family: var(--font) !important; }
button, input, select, textarea { font-family: var(--font); }
h1 { font-weight: 700; letter-spacing: -.02em; text-shadow: 3px 3px 0 var(--neo-green); }
h1 span, h2 span, h3 span { color: #000; }
h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; }
a { color: inherit; }
code, pre, kbd, samp { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   4. Hard-shadow press interaction for buttons (low specificity on purpose,
      so page-level rules can still opt out)
   -------------------------------------------------------------------------- */
button:not(:disabled), a.btn, .btn, [class$="-btn"]:not(div):not(span) {
  transition: box-shadow .12s ease, transform .12s ease, background-color .12s ease;
}
button:not(:disabled):hover, a.btn:hover, .btn:hover {
  transform: translateY(-2px);
}
button:not(:disabled):active, a.btn:active, .btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 0 #000 !important;
}
button:disabled { opacity: .55; cursor: not-allowed; }

/* inputs: thick black border + hard shadow on focus */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,
textarea:focus, select:focus {
  outline: none;
  box-shadow: 4px 4px 0 0 #000;
}
::placeholder { color: #6b7280; opacity: 1; }

/* media */
img, video { max-width: 100%; }
video { border: 3px solid #000; border-radius: 14px; }

/* --------------------------------------------------------------------------
   5. Scrollbars
   -------------------------------------------------------------------------- */
* { scrollbar-color: #000 var(--neo-cream); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--neo-cream); border-left: 2px solid #000; }
::-webkit-scrollbar-thumb { background: var(--neo-yellow); border: 2px solid #000; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}