/* css/tokens.css — Wisp design system (single source of truth for the app + landing).
   Glassmorphism over a magical-forest gradient, with a glowing iridescent border and two themes:
   dark "twilight" (default) and light "fairy" (data-theme="light"). App aliases (--accent,
   --border, --text, --dim, --faint, --s1..s4, --b1..b4, --r..) are preserved so the existing app
   keeps working with the refreshed palette. */

/* ── Dark "twilight" (default) ─────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Magical-forest gradient background (obsidian + midnight-indigo + a breath of forest) */
  --bg: #07070d;
  --bg-grad:
    radial-gradient(1200px 820px at 12% -12%, #1c1448 0%, transparent 55%),
    radial-gradient(1000px 720px at 102% 2%, #0a2c2c 0%, transparent 52%),
    radial-gradient(1100px 1000px at 50% 122%, #15122e 0%, transparent 60%),
    linear-gradient(180deg, #07070d 0%, #0a0917 52%, #07090f 100%);

  /* Surfaces */
  --s1: #100f18;  /* topbar / sidebar */
  --s2: #15131f;  /* cards / panels */
  --s3: #1b1830;  /* inputs / code bg */
  --s4: #221d3a;  /* hover */

  /* Glass (frosted, smoked) */
  --glass:   rgba(22, 20, 42, 0.46);
  --glass-2: rgba(30, 26, 56, 0.60);
  --glass-blur: blur(22px) saturate(125%);

  /* Iridescent / bioluminescent border + glow */
  --irid: linear-gradient(135deg, #a78bfa 0%, #22d3ee 42%, #cbd5e1 66%, #a78bfa 100%);
  --hairline: rgba(167, 139, 250, 0.30);
  --glow: 0 16px 50px -16px rgba(124, 92, 255, 0.45), 0 0 28px -8px rgba(34, 211, 238, 0.28);

  /* Accents */
  --accent:   #7c5cff;  /* primary action — electric violet */
  --accent-2: #22d3ee;  /* secondary — electric cyan */
  --accent-3: #cbd5e1;  /* tertiary — pale silver */
  --a2: #22d3ee;        /* info / links (app alias) */
  --a3: #ff5f7a;        /* destructive */
  --a4: #c084fc;        /* agent / magic */
  --a5: #34d399;        /* success */

  /* Borders */
  --b1: #1b1830; --b2: #262040; --b3: #322a55; --b4: #463a72;

  /* Text */
  --t1: #ecebf6; --t2: #a39fc4; --t3: #6a648e;

  /* Typography */
  --fd: 'Outfit', system-ui, sans-serif;
  --ff: 'Outfit', system-ui, sans-serif;
  --fm: 'DM Mono', ui-monospace, monospace;

  /* Radii */
  --r: 7px; --r2: 11px; --r3: 16px;

  /* Layout (app) */
  --sb-w: 290px; --editor-w: 50%;

  /* App aliases */
  --border: var(--b2); --border-hi: var(--b3);
  --dim: var(--t2); --faint: var(--t3); --text: var(--t1);
}

/* ── Light "fairy" ────────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --bg: #f4fbf6;
  --bg-grad:
    radial-gradient(1200px 820px at 12% -12%, #fde6f1 0%, transparent 55%),
    radial-gradient(1000px 720px at 102% 2%, #e3fff2 0%, transparent 52%),
    radial-gradient(1100px 1000px at 50% 122%, #fdf6e0 0%, transparent 60%),
    linear-gradient(180deg, #f6fbf7 0%, #fef2f8 50%, #f4f9ff 100%);

  --s1: #ffffff; --s2: #fbfcff; --s3: #f1f3fa; --s4: #e9edf7;

  --glass:   rgba(255, 255, 255, 0.55);
  --glass-2: rgba(255, 255, 255, 0.72);
  --glass-blur: blur(20px) saturate(135%);

  --irid: linear-gradient(135deg, #ffb8d9 0%, #a7f3d0 45%, #fde68a 70%, #ffb8d9 100%);
  --hairline: rgba(192, 132, 252, 0.32);
  --glow: 0 18px 50px -18px rgba(192, 132, 252, 0.35), 0 0 26px -8px rgba(52, 211, 153, 0.22);

  --accent:   #a855f7;  /* magical violet (darker for contrast on light) */
  --accent-2: #34d399;  /* mint */
  --accent-3: #f59e0b;  /* gold */
  --a2: #6366f1; --a3: #ef4466; --a4: #c084fc; --a5: #10b981;

  --b1: #eef1f7; --b2: #e2e6f0; --b3: #d3d9e8; --b4: #c2cadf;

  --t1: #2a2440; --t2: #6b6488; --t3: #9b94b4;
}

/* ── Glass card utility (frosted panel + iridescent glowing border) ───────── */
.wisp-glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--r3);
  box-shadow: var(--glow);
}
/* the 1px iridescent border, drawn as a gradient ring via a masked pseudo-element */
.wisp-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--irid);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.7;
  pointer-events: none;
}