/* @rudedog/ui — "Velvet" theme layer (design_handoff_brutalism_store_v2).
   Deep velvet-violet ground, soft radial light, Poppins UI, frosted-glass
   cards, hot-pink CTAs. Link AFTER tokens.css + base.css: it re-points the
   core aliases (--font/--accent/--page/...) so base + shared components stay
   coherent, then adds the v-* vocabulary. Space Mono remains the annotation
   layer. Values are verbatim from the handoff — keep oklch. */

:root {
  /* Core alias overrides (Velvet surfaces) */
  --font: "Poppins", system-ui, sans-serif;
  --accent: oklch(0.6 0.24 355); /* pink CTA ~#E5397F */
  --accent-hover: oklch(0.56 0.24 355);
  --accent-tint: oklch(0.6 0.24 355 / 0.4);
  --page: oklch(0.33 0.16 288); /* solid fallback under the gradient */
  --surface: rgba(255, 255, 255, 0.08);
  --ink: #fff;
  --ink-muted: oklch(0.9 0.03 290);
  --ink-faint: oklch(0.85 0.04 290);
  --hair: rgba(255, 255, 255, 0.14);
  --link: oklch(0.9 0.03 290);

  /* Velvet tokens */
  --v-ground: linear-gradient(160deg, oklch(0.36 0.16 288), oklch(0.3 0.15 285) 55%, oklch(0.33 0.17 292));
  --v-glow: radial-gradient(900px 500px at 80% 0%, oklch(0.5 0.2 295 / 0.4), transparent 62%),
    radial-gradient(620px 380px at 5% 100%, oklch(0.45 0.18 280 / 0.35), transparent 60%);
  --v-pink: oklch(0.6 0.24 355);
  --v-pink-hover: oklch(0.56 0.24 355);
  --v-pink-glow: 0 16px 36px -12px oklch(0.6 0.24 355 / 0.65);
  --v-lavender: oklch(0.82 0.09 290);
  --v-sub: oklch(0.92 0.02 290);
  --v-body: oklch(0.9 0.03 290);
  --v-meta: oklch(0.85 0.04 290);
  --v-faint: oklch(0.8 0.04 290);
  --v-mono-faint: oklch(0.8 0.05 290);
  --v-amber: oklch(0.92 0.05 100);
  --v-glass: rgba(255, 255, 255, 0.08);
  --v-glass-border: rgba(255, 255, 255, 0.14);
  --v-glass-strong: rgba(255, 255, 255, 0.1);
  --v-glass-strong-border: rgba(255, 255, 255, 0.2);
  --v-glass-fallback: rgba(46, 32, 92, 0.55);
  --v-ghost-border: rgba(255, 255, 255, 0.24);
  --v-ghost-hover: rgba(255, 255, 255, 0.12);
  --v-white-ink: oklch(0.32 0.15 288);
  --v-white-hover: oklch(0.93 0.01 290);
  --v-chip-bg: oklch(0.44 0.16 290);
  --v-card-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55);
  --v-r-card: 22px;
  --v-r-featured: 26px;
  --v-r-btn: 12px;
  --v-r-tile: 16px;

  /* Scrollbars on the velvet ground: the warm-ground defaults are near-black
     and effectively invisible here, so light them instead. */
  --scrollbar-idle: rgba(255, 255, 255, 0.12);
  --scrollbar: rgba(255, 255, 255, 0.22);
  --scrollbar-hover: rgba(255, 255, 255, 0.38);
}

/* ---- ground ---- */
.v-ground {
  background: var(--v-ground);
  background-attachment: fixed;
  color: #fff;
}
.v-glowlayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--v-glow);
}
.v-ground ::selection,
.v-ground::selection {
  background: oklch(0.6 0.24 355 / 0.4);
}

/* ---- glass cards ---- */
.v-card {
  border-radius: var(--v-r-card);
  background: var(--v-glass-fallback);
  border: 1px solid var(--v-glass-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.v-card-featured {
  border-radius: var(--v-r-featured);
  background: var(--v-glass-fallback);
  border: 1px solid var(--v-glass-strong-border);
}
@supports (backdrop-filter: blur(8px)) {
  .v-card {
    background: var(--v-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .v-card-featured {
    background: var(--v-glass-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
.v-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--v-card-shadow);
}

/* ---- buttons ---- */
.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--v-r-btn);
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.v-btn:active {
  transform: translateY(1px);
}
.v-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.v-pink {
  background: var(--v-pink);
  color: #fff;
}
.v-pink:hover {
  background: var(--v-pink-hover);
  box-shadow: var(--v-pink-glow);
}
.v-pink:disabled:hover {
  background: var(--v-pink);
  box-shadow: none;
}
.v-ghost {
  background: transparent;
  border: 1px solid var(--v-ghost-border);
  color: #fff;
}
.v-ghost:hover {
  background: var(--v-ghost-hover);
}
.v-white {
  background: #fff;
  color: var(--v-white-ink);
}
.v-white:hover {
  background: var(--v-white-hover);
}

/* ---- gradient icon tile (52px) + orbit chip (42px circle) ---- */
.v-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--v-r-tile);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
}
.v-chip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--v-chip-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

/* ---- pills ---- */
.v-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.v-pill-pink {
  padding: 3px 10px;
  border: none;
  background: var(--v-pink);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.v-pill-sandbox {
  color: var(--v-amber);
}

/* ---- mono annotation helpers ---- */
.v-kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.85 0.06 290);
}
.v-meta-mono {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-mono-faint);
}

/* ============================================================
   Classic @rudedog/ui components on velvet ground.
   An app migrates by linking fonts-poppins.css + velvet.css after the
   classic set and adding class="v-ground" to <body> — the overrides below
   re-skin the shared vocabulary (cards, buttons, pills, tiles, gate)
   without touching app markup.
   ============================================================ */
.v-ground {
  background: var(--v-ground);
  background-attachment: fixed;
}
.v-ground .card {
  background: var(--v-glass-fallback);
  border-color: var(--v-glass-border);
}
@supports (backdrop-filter: blur(8px)) {
  .v-ground .card {
    background: var(--v-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}
.v-ground .card-hover:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: var(--v-card-shadow);
}
.v-ground .btn {
  border-radius: var(--v-r-btn);
}
.v-ground .btn-ghost {
  border-color: var(--v-ghost-border);
  color: #fff;
}
.v-ground .btn-ghost:hover {
  background: var(--v-ghost-hover);
}
.v-ground .pill {
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--v-faint);
}
.v-ground .pill-owned {
  border-color: oklch(0.7 0.14 152 / 0.5);
  color: oklch(0.82 0.13 152);
  background: oklch(0.6 0.14 152 / 0.15);
}
.v-ground .pill-accent {
  border-color: oklch(0.6 0.24 355 / 0.55);
  color: oklch(0.86 0.12 355);
  background: oklch(0.6 0.24 355 / 0.18);
}
.v-ground .glyph-tile {
  border-radius: 12px;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.v-ground .glyph-tile-muted {
  background: rgba(255, 255, 255, 0.12);
  color: var(--v-meta);
  box-shadow: none;
}
.v-ground .eyebrow-meta {
  color: var(--v-faint);
}
.v-ground .kicker {
  color: var(--v-meta);
}
.v-ground .empty-dash {
  border-color: rgba(255, 255, 255, 0.25);
}

/* Auth gate on velvet: re-point its self-scoped palette. */
.v-ground .auth-gate {
  --a: var(--v-pink);
  --a-hover: var(--v-pink-hover);
  --a-tint: oklch(0.6 0.24 355 / 0.2);
  --pg: oklch(0.31 0.15 287);
  --raise: rgba(255, 255, 255, 0.07);
  --ink: #fff;
  --ink-mut: var(--v-body);
  --ink-faint: var(--v-meta);
  --hair: rgba(255, 255, 255, 0.16);
}
.v-ground .auth-brand {
  background: rgba(255, 255, 255, 0.05);
}
.v-ground .auth-input:focus,
.v-ground .auth-otp input:focus {
  border-color: rgba(255, 255, 255, 0.4);
}
.v-ground .auth-check-badge {
  box-shadow: 0 8px 24px oklch(0.6 0.24 355 / 0.4);
}

/* ---- motion accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  .v-card,
  .v-btn {
    transition: none;
  }
  .v-card-hover:hover {
    transform: none;
  }
}