/*
 * StreamVault — Design System Tokens
 * Brand: "Aurora Glass — A Private Cinema in the Cloud"
 *   - Deep cosmic purple ground, frosted glass surfaces, violet/cyan/rose
 *     aurora accents, soft glow, geometric sans-serif typography.
 *   - Display (Space Grotesk) + body (Inter) + code (JetBrains Mono).
 *   - Premium SaaS / Apple-Linear-Vercel sensibility. No archive / no
 *     editorial chrome — that direction was retired in v11.8.0.
 *
 * Every variable below has both a *brand* name (--paper, --ink, --rust) AND
 * a *legacy* alias (--bg, --text, --accent, etc.) so existing pages that
 * still reference the old token names inherit the new palette for free.
 * Link this file before any component stylesheet.
 *
 * Color mapping (legacy → aurora):
 *   --ink   warm near-black  → deep cosmic purple-black
 *   --paper warm cream       → lavender-white
 *   --rust  oxblood          → violet (primary accent)
 *   --ochre warm gold        → cyan (secondary accent)
 *   --olive warm green       → emerald (ok / success)
 *   --slate cool steel       → sky blue (info)
 *   --blood darker rust      → rose (danger)
 */

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

:root {
  /* ── Brand tokens — preferred names ─────────────────────────────────── */
  --ink:         #0a0612;          /* deep cosmic purple-black */
  --ink-2:       #14102a;          /* slightly raised surface */
  --ink-3:       #1d1638;          /* card surface */
  --ink-4:       #2a2050;          /* hovered / raised surface */
  --paper:       #f4f1ff;          /* lavender-white — primary text */
  --paper-dim:   #b6a8d1;          /* secondary text */
  --paper-faint: #6a5e85;          /* tertiary text / hairlines on dark */
  --rust:        #a78bfa;          /* violet — primary accent */
  --rust-lit:    #c4b5fd;          /* light violet — links / hover */
  --rust-deep:   #7c3aed;          /* deep violet — pressed */
  --rust-dim:    rgba(167,139,250,0.14);
  --ochre:       #67e8f9;          /* cyan — secondary accent (guest pass, warnings) */
  --ochre-lit:   #a5f3fc;
  --ochre-dim:   rgba(103,232,249,0.14);
  --olive:       #34d399;          /* emerald — ok / success */
  --olive-lit:   #6ee7b7;
  --olive-dim:   rgba(52,211,153,0.14);
  --slate:       #60a5fa;          /* sky blue — informational */
  --slate-lit:   #93c5fd;
  --slate-dim:   rgba(96,165,250,0.14);
  --blood:       #ec4899;          /* rose — danger */
  --blood-lit:   #f472b6;
  --blood-dim:   rgba(236,72,153,0.16);
  --rule:        rgba(244,241,255,0.08);
  --rule-2:      rgba(244,241,255,0.18);

  /* ── Aurora-specific tokens (new in v11.8.0) ────────────────────────── */
  --glass-bg:        rgba(255,255,255,0.05);
  --glass-bg-hover:  rgba(255,255,255,0.07);
  --glass-border:    rgba(255,255,255,0.10);
  --glass-border-2:  rgba(255,255,255,0.18);
  --glass-blur:      blur(28px) saturate(180%);
  --aurora-violet:   #7c3aed;
  --aurora-cyan:     #06b6d4;
  --aurora-rose:     #ec4899;
  --aurora-gradient: linear-gradient(135deg, #a78bfa 0%, #67e8f9 100%);
  --aurora-gradient-hot: linear-gradient(135deg, #c4b5fd 0%, #a5f3fc 100%);

  /* ── Legacy aliases — point old token names at the new palette ──────── */
  --bg:          var(--ink);
  --surface:     var(--ink-2);
  --surface2:    var(--ink-3);
  --surface3:    var(--ink-4);
  --border:      var(--rule);
  --border2:     var(--rule-2);
  --text:        var(--paper);
  --text-2:      var(--paper-dim);
  --text-3:      var(--paper-faint);
  --accent:      var(--rust);
  --accent-lit:  var(--rust-lit);
  --accent-dim:  var(--rust-dim);
  --red:         var(--blood);
  --red-dim:     var(--blood-dim);
  --green:       var(--olive);
  --green-dim:   var(--olive-dim);
  --yellow:      var(--ochre);
  --yellow-dim:  var(--ochre-dim);
  --blue:        var(--slate);
  --blue-dim:    var(--slate-dim);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --dur-instant:  80ms;
  --dur-fast:     150ms;
  --dur-base:     200ms;
  --dur-enter:    250ms;
  --dur-exit:     160ms;
  --dur-progress: 500ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Tactile scale ──────────────────────────────────────────────────── */
  --scale-press: 0.97;

  /* ── Focus rings — violet glow ──────────────────────────────────────── */
  --ring:        0 0 0 2px var(--ink), 0 0 0 4px var(--rust);
  --ring-subtle: 0 0 0 3px rgba(167,139,250,.40);

  /* ── Elevation — soft glass shadows ─────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30);
  --shadow-md:   0 6px 22px rgba(10,6,18,.55), 0 2px 6px rgba(0,0,0,.30);
  --shadow-lg:   0 24px 60px rgba(10,6,18,.65), 0 8px 22px rgba(0,0,0,.40);
  --shadow-glow: 0 0 28px -4px rgba(167,139,250,.45);

  /* ── Radius — kept the existing scale so layouts don't shift ────────── */
  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 9999px;

  /* ── Type stacks ─────────────────────────────────────────────────────
     --serif is now Space Grotesk (geometric display), --mono is now
     Inter (clean body / microtype). The token names are preserved for
     backwards compat with the thousands of existing rules that
     reference var(--serif) / var(--mono). Real monospace contexts
     (logs, code, accession numbers) use --code, introduced in v11.8.0. */
  --serif: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --mono:  'Inter', 'Space Grotesk', system-ui, sans-serif;
  --code:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: var(--serif);
  --body:    var(--mono);
}


/* ── Aurora background layer ────────────────────────────────────────────
   Pages opt in by adding class="sv-aurora-bg" to <body>. Three drifting
   colored orbs render via a single ::before pseudo-element using stacked
   radial gradients (cheap — no DOM, no extra paint passes). The
   `animation` is GPU-only (transform) so it costs essentially nothing
   even on integrated graphics.

   `.sv-aurora-bg-subtle` is a lower-opacity variant for content-heavy
   pages (the library, the admin panel) where a loud background would
   compete with the data. */
body.sv-aurora-bg,
body.sv-aurora-bg-subtle {
  position: relative;
  isolation: isolate;
}
body.sv-aurora-bg::before,
body.sv-aurora-bg-subtle::before {
  content: '';
  position: fixed;
  /* Was inset: -10% (120%×120% viewport blurred surface). Tightened to
     -4% so the blur radius has less area to cover, big reduction in
     compositor cost on integrated GPUs. The blur softens any visible
     edge so the trim is invisible. */
  inset: -4%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 25%, rgba(124, 58, 237, 0.55), transparent 70%),
    radial-gradient(34% 28% at 82% 75%, rgba(  6,182,212, 0.50), transparent 70%),
    radial-gradient(36% 30% at 55% 50%, rgba(236, 72,153, 0.40), transparent 70%);
  /* Was blur(80px). Halved to blur(40px) — the radial gradients already
     fall off softly at `transparent 70%`, so 40px is enough to read as
     glow without sharp edges. Blur cost is roughly O(r²), so this is
     ~4× cheaper on the GPU compositor every paint. */
  filter: blur(40px);
  animation: sv-aurora-drift 32s ease-in-out infinite alternate;
  /* Hint the compositor that this layer is animated-via-transform only
     and can be promoted to its own GPU layer. Stops the browser from
     re-rastering it on every adjacent paint. */
  will-change: transform;
}
/* Reduced-motion users + phones: skip the blurred animated layer entirely.
   The static base body bg colour remains; we just lose the soft orbs. */
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
  body.sv-aurora-bg::before,
  body.sv-aurora-bg-subtle::before { animation: none; filter: blur(0); opacity: 0.18; }
}
body.sv-aurora-bg-subtle::before {
  opacity: 0.55;
}
/* A subtle paper-grain noise overlay sits on top of the aurora so the
   blur doesn't read as flat. ~3% opacity is the sweet spot — visible
   only as texture, never as pixels. */
body.sv-aurora-bg::after,
body.sv-aurora-bg-subtle::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' viewBox='0 0 220 220'><filter id='n'><feTurbulence baseFrequency='0.9'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.04;
  mix-blend-mode: overlay;
}
@keyframes sv-aurora-drift {
  from { transform: translate(0, 0)   scale(1);    }
  to   { transform: translate(2.5%, -2%) scale(1.05); }
}


/* ── Tactile press ─────────────────────────────────────────────────────── */
.sv-pressable {
  transition:
    transform  var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    opacity    var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.sv-pressable:active {
  transform: scale(var(--scale-press));
}
.sv-pressable:disabled,
.sv-pressable[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}


/* ── Card hover lift — kept but with lavender-cast border ──────────────── */
.sv-card-hover {
  transition:
    transform    var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.sv-card-hover:hover {
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-md);
  border-color: var(--rule-2);
}


/* ── Consistent focus ring ─────────────────────────────────────────────── */
.sv-focus:focus-visible {
  outline:    none;
  box-shadow: var(--ring);
}
.sv-focus-subtle:focus-visible {
  outline:    none;
  box-shadow: var(--ring-subtle);
}


/* ── Status badges — now Inter small caps ──────────────────────────────── */
.sv-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  padding:        2px 8px;
  border-radius:  var(--r-pill);
  font-family:    var(--mono);
  font-size:      .62rem;
  font-weight:    600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space:    nowrap;
}
.sv-badge-green  { background: var(--olive-dim);  color: var(--olive-lit); }
.sv-badge-red    { background: var(--blood-dim);  color: var(--blood-lit); }
.sv-badge-yellow { background: var(--ochre-dim);  color: var(--ochre-lit); }
.sv-badge-blue   { background: var(--slate-dim);  color: var(--slate-lit); }
.sv-badge-amber  { background: var(--rust-dim);   color: var(--rust-lit);  }
.sv-badge-muted  { background: var(--ink-4);      color: var(--paper-dim); }


/* ── Glass card primitive (new in v11.8.0) ────────────────────────────── */
.sv-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08);
}
.sv-glass-hover {
  transition:
    border-color var(--dur-base) var(--ease-out),
    background   var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out);
}
.sv-glass-hover:hover {
  border-color: var(--glass-border-2);
  background:   var(--glass-bg-hover);
}


/* ── Skeleton shimmer ──────────────────────────────────────────────────── */
.sv-skeleton {
  background: linear-gradient(
    90deg,
    var(--ink-3) 25%,
    var(--ink-4) 50%,
    var(--ink-3) 75%
  );
  background-size: 200% 100%;
  animation: sv-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes sv-shimmer {
  from { background-position:  200% 0; }
  to   { background-position: -200% 0; }
}


/* ── Enter animations ──────────────────────────────────────────────────── */
.sv-fade-in {
  animation: sv-fadeIn var(--dur-enter) var(--ease-out) both;
}
@keyframes sv-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.sv-slide-up {
  animation: sv-slideUp var(--dur-enter) var(--ease-out) both;
}
@keyframes sv-slideUp {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.sv-backdrop-in {
  animation: sv-backdropIn var(--dur-enter) var(--ease-out) both;
}
@keyframes sv-backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}