/* ─── base.css ────────────────────────────────────────────────────────────────
 * CSS custom properties, global resets, body layout, and ambient background
 * animations. All other CSS files depend on the variables defined here.
 * ─────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:wght@400;600&display=swap');

:root {
  /* FAE brand palette */
  --fae-color1: #fbff00;
  --fae-color2: #b4ff00;

  /* Surface/background layers */
  --bg:       #0A0A0F;
  --surface:  #181825;
  --surface2: #23233b;
  --surface3: #2d2d4d;

  /* Typography & borders */
  --border:   rgba(255, 255, 255, 0.1);
  --text:     #FFFFFF;
  --muted:    rgba(255,255,255,0.5);

  /* Accent colours */
  --accent:   #b4ff00;
  --accent2:  #7aaa00;
  --green:    #89d185;
  --red:      #f48771;

  /* Layout dimensions (can be overridden by resize handles) */
  --header-h:  48px;
  --left-w:    280px;
  --preview-w: 38%;
  --tab-h:     36px;
}

/* ── Hue-rotation shimmer used on branded buttons ─────────────────────────── */
@keyframes faeHueRotate {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ── Animated gradient line in the header ─────────────────────────────────── */
@keyframes faeGradientLine {
  0%   { filter: hue-rotate(0deg) blur(30px); }
  100% { filter: hue-rotate(360deg) blur(30px); }
}

/* ── Floating orb animation ───────────────────────────────────────────────── */
@keyframes orbFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-30px); }
}

/* ── Base reset ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ── FAE ambient background orbs ─────────────────────────────────────────── */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  animation: orbFloat 10s ease-in-out infinite;
}
body::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(180,255,0,0.08) 0%, transparent 70%);
  top: -10%; left: -10%;
}
body::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(100,50,200,0.07) 0%, transparent 70%);
  bottom: -10%; right: 10%;
  animation-direction: reverse;
  animation-duration: 14s;
}

/* ── Ghost text (inline autocomplete suggestion overlay) ─────────────────── */
.cm-ghost {
  color: rgba(204,204,204,0.35);
  font-style: italic;
  pointer-events: none;
  user-select: none;
}