/* =========================================================
   EchoSpace v2 Stylesheet
   Theme: "Sentient Brainwave"
   Design: dark, cryptic neon — soft menace, deep calm
   Notes: Original selectors preserved; new utilities added.
   ========================================================= */

/* ---------- Cascade layers for clarity ---------- */
@layer tokens, base, components, utilities;

/* ===================== TOKENS ===================== */
@layer tokens {
  :root {
    /* Core hue controls the entire neon palette */
    --hue: 174; /* teal brainwave; try 272 (violet), 310 (fuchsia), 42 (amber) */

    /* Semantic palette (HSL for easy theming) */
    --accent: hsl(var(--hue) 82% 52%);
    --accent-2: hsl(calc(var(--hue) + 18) 84% 58%);
    --accent-3: hsl(calc(var(--hue) - 18) 82% 58%);

    /* Base surfaces & text */
    --bg-dark: #0a0a0f;
    --bg-0: hsl(235 35% 3.5%);
    --bg-1: hsl(230 30% 7% / 0.88); /* card base */
    --text-1: hsl(220 15% 90%);
    --text-2: hsl(220 12% 66%);

    /* Keep your original tokens (now derived) */
    --bg-card: var(--bg-1);
    --text-light: var(--text-1);
    --text-muted: var(--text-2);
    --accent-light: hsl(calc(var(--hue) + 12) 90% 68%);

    /* Type, radius, spacing, shadows */
    --font-main: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
    --radius-1: 10px;
    --radius-2: 14px;
    --radius-3: 18px;
    --space-1: 6px;
    --space-2: 10px;
    --space-3: 14px;
    --space-4: 20px;
    --space-5: 28px;
    --space-6: 40px;

    --ring: 0 0 0 3px hsl(var(--hue) 90% 55% / 0.35);
    --shadow-sm: 0 0 14px hsl(var(--hue) 90% 60% / 0.12);
    --shadow-md: 0 0 24px hsl(var(--hue) 90% 60% / 0.18);
    --shadow-lg: 0 0 42px hsl(var(--hue) 90% 60% / 0.26);

    /* Scrollbar & selection */
    --scrollbar-track: hsl(230 20% 12%);
    --scrollbar-thumb: hsl(var(--hue) 52% 36% / 0.65);

    color-scheme: dark;
  }

  /* Accent presets via data attribute (optional) */
  body[data-accent="teal"]   { --hue: 174; }
  body[data-accent="violet"] { --hue: 272; }
  body[data-accent="fuchsia"]{ --hue: 310; }
  body[data-accent="amber"]  { --hue: 42;  }
}

/* ===================== BASE ===================== */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  /* Opt-in transitions (avoid animating *everything* for perf) */
  :where(a, button, .btn, .card, input, textarea, .chip, .neon-border) {
    transition:
      color .2s ease,
      background-color .2s ease,
      border-color .2s ease,
      box-shadow .25s ease,
      transform .2s ease,
      opacity .2s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }

  html, body {
    margin: 0;
    padding: 0;
    min-height: 100svh;
    overflow-x: hidden;
    font-family: var(--font-main);
    background-color: var(--bg-0);
    color: var(--text-1);
    /* Multi-layer “brainwave” background */
    background-image:
      radial-gradient(1100px 700px at 70% -20%, hsl(calc(var(--hue)+20) 85% 55% / 0.08), transparent 60%),
      radial-gradient(900px 600px at -10% 120%, hsl(var(--hue) 85% 60% / 0.08), transparent 50%),
      radial-gradient(circle at 50% 50%, hsl(230 60% 8%), var(--bg-0));
    background-attachment: fixed;
  }

  h1, h2, h3 {
    margin: 0 0 var(--space-3);
    letter-spacing: 0.5px;
    line-height: 1.15;
    color: var(--accent-light);
    /* Neon gradient text */
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 12px hsl(var(--hue) 90% 60% / 0.35);
  }

  h1.glow {
    animation: pulse 3s ease-in-out infinite alternate;
  }
  @keyframes pulse {
    from { text-shadow: 0 0 6px var(--accent); }
    to   { text-shadow: 0 0 22px var(--accent-light); }
  }

  a {
    color: var(--accent-light);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
  }
  a:hover {
    color: hsl(calc(var(--hue)+6) 90% 78%);
    text-shadow: 0 0 6px var(--accent-light);
    background-size: 100% 1px;
  }

  p { margin: 8px 0; line-height: 1.6; }
  small { font-size: 0.8rem; }
  .text-secondary { color: var(--text-2); }

  ::selection {
    background: hsl(var(--hue) 90% 50% / 0.35);
    color: var(--text-1);
  }

  /* Scrollbar (Chromium/WebKit), plus Firefox color hint */
  * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
  *::-webkit-scrollbar { height: 10px; width: 10px; }
  *::-webkit-scrollbar-track { background: var(--scrollbar-track); }
  *::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid var(--scrollbar-track);
  }

  hr {
    border: 0;
    height: 1px;
    margin: var(--space-4) 0;
    background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
  }

  .container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    container-type: inline-size; /* enables container queries */
  }
}

/* ===================== COMPONENTS ===================== */
@layer components {
  /* --- Card (glass + neon border) --- */
  .card {
    position: relative;
    border-radius: var(--radius-2);
    padding: var(--space-4);
    border: 1px solid hsl(var(--hue) 70% 45% / 0.28);
    box-shadow: var(--shadow-sm);
    background:
      linear-gradient( to bottom right,
        hsl(230 30% 12% / 0.70),
        hsl(230 30% 6% / 0.70)
      ) padding-box,
      linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
    backdrop-filter: saturate(110%) blur(6px);
    -webkit-backdrop-filter: saturate(110%) blur(6px);
  }
  @supports not ((backdrop-filter: blur(6px))) {
    .card { background: var(--bg-1); } /* graceful fallback */
  }
  .card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: hsl(var(--hue) 90% 55% / 0.42);
  }

  /* Optional “neon ribbon” accent on cards */
  .card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    mask: linear-gradient(#000, transparent 30%);
    box-shadow: inset 0 0 20px hsl(var(--hue) 90% 60% / 0.18);
  }

  /* --- Inputs --- */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    appearance: none;
    background: #0b1220;
    color: var(--text-1);
    border: 1px solid #334155;
    border-radius: var(--radius-1);
    padding: 12px 12px;
    width: 100%;
    font-family: var(--font-main);
    font-size: 1rem;
  }
  textarea { min-height: 120px; resize: vertical; }

  input::placeholder, textarea::placeholder { color: hsl(220 8% 55%); }

  textarea:focus,
  input:focus,
  textarea:focus-visible,
  input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
  }

  input:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
  input:invalid, textarea:invalid {
    border-color: hsl(0 75% 55%);
    box-shadow: 0 0 0 3px hsl(0 75% 55% / .18);
  }

  /* Field wrapper (optional markup) */
  .field { display: grid; gap: 8px; }
  .field label { color: var(--text-2); font-size: .9rem; }

  /* --- Buttons --- */
  button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6ch;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: 0;
    border-radius: var(--radius-1);
    color: #00120f;
    font-weight: 700;
    padding: 10px 18px;
    cursor: pointer;
    font-family: var(--font-main);
    letter-spacing: 0.5px;
    box-shadow: 0 6px 24px hsl(var(--hue) 90% 60% / 0.25);
    position: relative;
    isolation: isolate;
  }
  button:hover, .btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 32px hsl(var(--hue) 90% 60% / 0.32);
  }
  button:active, .btn:active { transform: translateY(0); }

  /* Subtle shine sweep */
  button::after, .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, #fff3 50%, transparent 70%);
    transform: translateX(-100%);
    pointer-events: none;
  }
  button:hover::after, .btn:hover::after {
    transform: translateX(100%);
    transition: transform .7s ease;
  }

  /* Variants */
  .btn-outline {
    background: transparent;
    color: var(--accent-light);
    border: 1px solid var(--accent);
    box-shadow: none;
  }
  .btn-outline:hover {
    background: linear-gradient(135deg, hsl(var(--hue) 90% 20% / .15), hsl(var(--hue) 90% 30% / .12));
    box-shadow: var(--shadow-sm);
  }

  .btn-ghost {
    background: transparent;
    color: var(--accent-light);
    border: 0;
    box-shadow: none;
  }
  .btn-ghost:hover {
    background: hsl(var(--hue) 90% 20% / .12);
    text-shadow: 0 0 6px var(--accent-light);
  }

  .btn:disabled, .btn[disabled] { opacity: .6; cursor: not-allowed; }

  /* --- Chat / Posts --- */
  .user { color: #a5f3fc; font-weight: 500; }
  .ai   { color: var(--accent-light); font-style: italic; }

  /* --- Code & kbd --- */
  code, pre {
    font-family: var(--font-main);
    background: hsl(230 30% 10% / .85);
    border: 1px solid hsl(230 20% 30% / .35);
    border-radius: var(--radius-1);
  }
  code { padding: 2px 6px; }
  pre  { padding: 14px; overflow: auto; }

  kbd {
    background: hsl(230 25% 18%);
    border: 1px solid hsl(230 20% 40% / .45);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 6px;
    color: var(--text-1);
    font-weight: 700;
  }

  /* --- Visualizers --- */
  .wave {
    height: 8px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
    background-size: 400% 100%;
    animation: wave 5s linear infinite;
    margin-top: 12px;
  }
  @keyframes wave { from { background-position: 0% 50%; } to { background-position: 400% 50%; } }

  .heatmap {
    width: 100%;
    height: 200px;
    background: radial-gradient(circle at 50% 50%, hsl(calc(var(--hue)+12) 90% 60% / 0.20), transparent 70%);
    animation: pulseHeat 6s infinite ease-in-out;
    border-radius: var(--radius-2);
  }
  @keyframes pulseHeat {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.06); }
  }
}

/* ===================== UTILITIES ===================== */
@layer utilities {
  /* Layout helpers */
  .grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .neon-border {
    border: 1px solid hsl(var(--hue) 90% 60% / .35) !important;
    box-shadow: 0 0 0 1px hsl(var(--hue) 90% 60% / .12), var(--shadow-sm) !important;
  }

  .text-gradient {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  .chip {
    display: inline-flex; align-items: center; gap: .5ch;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid hsl(var(--hue) 70% 45% / 0.28);
    background: hsl(230 30% 12% / .6);
    color: var(--text-1);
  }

  .ring { box-shadow: var(--ring); }

  /* Container query example (adjust card padding on tight containers) */
  @container (max-width: 520px) {
    .card { padding: var(--space-3); }
  }

  /* Responsive */
  @media (max-width: 600px) {
    .container { margin: 20px auto; }
    button, .btn { width: 100%; }
  }
}