/* glam.css — design system adapted from mail.omra.rocks (chorizo).
   Drop-in: load AFTER Tailwind CDN. Adds dark "ink" theme with glassmorphism,
   aurora background, lime/cyan accents, Geist/Fraunces/JetBrains Mono fonts.
*/

:root {
  --ink:        #060814;
  --ink-2:      #0b0f1f;
  --ink-3:      #11162a;
  --paper:      #f4f1ea;
  --accent:     #a3e635;
  --accent-2:   #d4d42b;
  --accent-3:   #22d3ee;
  --accent-hot: #fb923c;
  --edge:        rgba(255,255,255,0.08);
  --edge-strong: rgba(255,255,255,0.16);
  --text:       #e6e8ef;
  --text-dim:   #b9bdcc;
  --text-muted: #6b7180;
  /* These are also exposed via the existing data-theme system used by zone partials */
  --bg-surface:     rgba(255,255,255,0.03);
  --border-surface: var(--edge);
}

[data-theme="light"] {
  --ink:        #f4f1ea;
  --ink-2:      #ffffff;
  --ink-3:      #f0eee5;
  --text:       #0b0f1f;
  --text-dim:   #2a2f3e;
  --text-muted: #6b7180;
  --edge:        rgba(0,0,0,0.08);
  --edge-strong: rgba(0,0,0,0.16);
  --bg-surface:     rgba(0,0,0,0.02);
  --border-surface: var(--edge);
}

html, body { background: var(--ink); color: var(--text); }
body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display { font-family: 'Fraunces', serif; font-optical-sizing: auto; letter-spacing: -0.02em; }
.mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ── Aurora background (fixed, behind everything) ─────────────────── */
.aurora-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(60% 50% at 10% 0%,  rgba(163,230,53,.18) 0%, transparent 60%),
    radial-gradient(55% 45% at 95% 10%, rgba(212,212,43,.18) 0%, transparent 62%),
    radial-gradient(50% 40% at 50% 100%, rgba(34,211,238,.13) 0%, transparent 60%),
    linear-gradient(180deg, #060814 0%, #080a1a 40%, #05070f 100%);
}
.aurora-bg::before {
  content: ""; position: absolute; inset: -20%;
  background:
    conic-gradient(from 220deg at 30% 20%,
      rgba(163,230,53,.14), rgba(212,212,43,.14),
      rgba(34,211,238,.08), rgba(163,230,53,.14));
  filter: blur(80px);
  animation: drift 28s linear infinite;
  mix-blend-mode: screen;
  opacity: .7;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(-4%, 2%, 0) rotate(180deg); }
  100% { transform: translate3d(0,0,0) rotate(360deg); }
}

[data-theme="light"] .aurora-bg {
  background:
    radial-gradient(60% 50% at 10% 0%,  rgba(163,230,53,.10) 0%, transparent 60%),
    radial-gradient(55% 45% at 95% 10%, rgba(212,212,43,.10) 0%, transparent 62%),
    radial-gradient(50% 40% at 50% 100%, rgba(34,211,238,.08) 0%, transparent 60%),
    linear-gradient(180deg, #f4f1ea 0%, #ffffff 40%, #f4f1ea 100%);
}
[data-theme="light"] .aurora-bg::before { opacity: .35; mix-blend-mode: multiply; }

/* ── Grain overlay (top of stacking) ──────────────────────────────── */
.grain::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .45;
  mix-blend-mode: overlay;
}

/* ── Glass panels ─────────────────────────────────────────────────── */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--edge);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 60px -30px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.02);
}
.glass-strong {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid var(--edge-strong);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
[data-theme="light"] .glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
}
[data-theme="light"] .glass-strong {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.75));
}
.glass-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s; }
.glass-hover:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
}
[data-theme="light"] .glass-hover:hover { border-color: rgba(0,0,0,.18); }

.hair { border-top: 1px solid var(--edge); }

/* ── Accent text gradient ─────────────────────────────────────────── */
.accent-text {
  background: linear-gradient(92deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, #8dd015 100%);
  color: #0a1500;
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 10px 30px -10px rgba(163,230,53,.5), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .2s ease, box-shadow .25s ease, filter .2s;
  font-weight: 600;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 34px -10px rgba(163,230,53,.55),
              0 6px 20px -6px rgba(251,146,60,.3),
              inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-primary:active { transform: translateY(0); filter: brightness(.98); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--edge-strong);
  color: var(--text);
  transition: background .2s, border-color .25s;
}
.btn-ghost:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.28); }
[data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.28); }

.btn-danger {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 8px 24px -8px rgba(239,68,68,.5), inset 0 1px 0 rgba(255,255,255,.4);
  font-weight: 600;
}
.btn-danger:hover { filter: brightness(1.08); }

/* ── Input fields ─────────────────────────────────────────────────── */
.input {
  background: rgba(7,9,20,.55);
  border: 1px solid var(--edge);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
[data-theme="light"] .input { background: rgba(255,255,255,.85); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(163,230,53,.15);
}

/* ── Tabs ─────────────────────────────────────────────────────────── */
.tab { transition: color .2s, background .2s, border-color .2s; }
.tab[data-active="true"] {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px -12px rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.22);
}
.tab[data-active="false"] { color: var(--text-dim); }
.tab[data-active="false"]:hover { color: var(--text); }

/* ── Chips / badges ───────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--edge);
  color: var(--text-dim);
}
.chip-accent {
  background: linear-gradient(180deg, rgba(163,230,53,.18), rgba(34,211,238,.10));
  border-color: rgba(163,230,53,.35);
  color: var(--accent);
}
.chip-warn {
  background: rgba(251,146,60,.12);
  border-color: rgba(251,146,60,.35);
  color: var(--accent-hot);
}
.chip-danger {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.35);
  color: #fca5a5;
}
.chip-ok {
  background: rgba(163,230,53,.12);
  border-color: rgba(163,230,53,.35);
  color: var(--accent);
}

/* ── Dot pattern bg utility ────────────────────────────────────────── */
.dots {
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 18px 18px;
}
[data-theme="light"] .dots {
  background-image: radial-gradient(rgba(0,0,0,.07) 1px, transparent 1px);
}

/* ── Meter / progress fill ────────────────────────────────────────── */
.meter-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  border: 1px solid var(--edge);
}
.meter-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--accent-3));
  box-shadow: 0 0 18px rgba(163,230,53,.35);
  transition: width .4s cubic-bezier(.2,.7,.2,1);
}

/* ── Pulse dot ────────────────────────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.15); }
}
.pulse-dot { animation: pulse-dot 2.4s ease-in-out infinite; }

/* ── Rise-in entrance ─────────────────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { opacity: 0; animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .04s; }
.d2 { animation-delay: .14s; }
.d3 { animation-delay: .24s; }
.d4 { animation-delay: .34s; }
.d5 { animation-delay: .44s; }
.d6 { animation-delay: .54s; }

/* ── Code shell / preformatted ────────────────────────────────────── */
.code-shell { background: rgba(7,9,20,.55); border: 1px solid var(--edge); }
[data-theme="light"] .code-shell { background: rgba(0,0,0,.04); }
.code-shell pre { overflow-x: auto; }

/* ── Selection + focus-visible ────────────────────────────────────── */
::selection { background: rgba(163,230,53,.4); color: #0a1500; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── Toast (used by HX-Trigger toastShow) ─────────────────────────── */
.glam-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid var(--edge-strong);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
  color: var(--text);
}
.glam-toast.error {
  border-color: rgba(239,68,68,.4);
  color: #fca5a5;
}

/* ── Top nav glass ────────────────────────────────────────────────── */
.glam-nav {
  position: sticky; top: 12px; z-index: 40;
  margin: 12px auto 0;
  max-width: 1280px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
}

.glam-nav .brand {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.glam-nav .brand .dot { color: var(--accent); }

.glam-nav-link {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-dim);
  transition: color .15s, background .15s;
}
.glam-nav-link:hover { color: var(--text); background: rgba(255,255,255,.04); }
.glam-nav-link.active { color: var(--text); background: rgba(255,255,255,.06); }
[data-theme="light"] .glam-nav-link:hover,
[data-theme="light"] .glam-nav-link.active { background: rgba(0,0,0,.04); }