/* ─────────────────────────────────────────────────────────────────
 * LivingBot · shared design tokens
 * Used by memes.pink, memes.black, browserops.shop, species-3d, demos.
 * Each site re-declares its scoped vars but reads from these primitives.
 * ───────────────────────────────────────────────────────────────── */

:root {
  /* ─── Pink (memes.pink) ─────────────────────────────────── */
  --pink-cream:   #fff7f3;
  --pink-bg:      #fdd6cf;
  --pink-bg-2:    #fff1ec;
  --pink-50:      #fff7f5;
  --pink-100:     #ffeae6;
  --pink-200:     #ffd7e5;
  --pink-300:     #f4a3b1;
  --pink-400:     #ff8aa3;
  --pink-500:     #ff5fa8;
  --pink-600:     #d94e2e;
  --pink-700:     #c43d80;
  --pink-800:     #9a4a3a;
  --pink-violet:  #7a3fb8;
  --pink-amber:   #f2a65a;
  --pink-ink:           #1f1410;
  --pink-ink-soft:      rgba(31,20,16,.65);
  --pink-ink-mute:      rgba(31,20,16,.42);
  --pink-border:        rgba(31,20,16,.10);
  --pink-border-soft:   rgba(31,20,16,.06);

  /* ─── Black (memes.black console) ───────────────────────── */
  --black-bg:        #0a0a0a;
  --black-bg-deep:   #060509;
  --black-bg-violet: #1a0d2e;
  --black-card:      #14141c;
  --black-surface:   #11101a;
  --black-surface-2: #15121f;
  --black-raised:    #1d1a2c;
  --black-border:        rgba(255,255,255,.07);
  --black-border-strong: rgba(255,255,255,.14);
  --black-text:    #f6f4ef;
  --black-soft:    rgba(246,244,239,.70);
  --black-muted:   rgba(246,244,239,.42);
  --black-faint:   rgba(246,244,239,.25);

  --neon-pink:       #ff4ea3;
  --neon-pink-soft:  #ff7ec0;
  --cyan:            #00d4ff;
  --cyan-soft:       #6ee6ff;
  --violet:          #a35bff;
  --amber:           #f2c12e;
  --green:           #1f8a5b;
  --coral:           #d94e2e;

  /* ─── Shop (browserops.shop) ────────────────────────────── */
  --shop-cream:    #fafaf7;
  --shop-cream-2:  #f3f1ea;
  --shop-ink:      #1a1a1a;
  --shop-ink-2:    #2a2a2a;
  --shop-muted:    #6b6b66;
  --shop-line:     rgba(26,26,26,.08);
  --shop-brand:        #d94e2e;
  --shop-brand-soft:   rgba(217,78,46,.08);
  --shop-gold:         #c9a86a;

  /* ─── Universal primitives ──────────────────────────────── */
  --ink:        var(--shop-ink);
  --brand:      var(--shop-brand);

  /* spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* radii */
  --r-sm:  6px;
  --r:     12px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* shadows */
  --sh-1:  0 1px 2px  rgba(0,0,0,.04);
  --sh-2:  0 4px 12px rgba(0,0,0,.06);
  --sh-3:  0 8px 24px rgba(0,0,0,.10);
  --sh-4:  0 16px 40px rgba(0,0,0,.14);
  --sh-5:  0 30px 80px rgba(0,0,0,.18);
  --glow-pink:  0 0 0 1px rgba(255,78,163,.18), 0 18px 50px rgba(255,78,163,.18);
  --glow-cyan:  0 0 0 1px rgba(0,212,255,.18), 0 18px 50px rgba(0,212,255,.16);
  --glow-coral: 0 12px 36px rgba(217,78,46,.22);

  /* easing */
  --ease-out: cubic-bezier(.21,.94,.35,1);
  --ease-in:  cubic-bezier(.55,.06,.7,.42);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --tx-fast:   .12s var(--ease-out);
  --tx:        .18s var(--ease-out);
  --tx-slow:   .28s var(--ease-out);

  /* fonts */
  --font-pink-serif:   'Fraunces','Times New Roman',ui-serif,Georgia,serif;
  --font-pink-sans:    'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-black-sans:   'Space Grotesk','IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --font-black-mono:   'JetBrains Mono',ui-monospace,'SF Mono',Menlo,'Cascadia Code',monospace;
  --font-shop-sans:    'Inter','Söhne',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-shop-serif:   'Fraunces','Times New Roman','Songti SC',ui-serif,Georgia,serif;
  --font-mono:         'JetBrains Mono',ui-monospace,Menlo,'Cascadia Code',monospace;

  /* type scale */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  44px;
  --t-4xl:  64px;
  --t-hero: clamp(44px, 6.4vw, 84px);

  /* line height */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-relaxed:1.6;

  /* z-index ramp */
  --z-base:  1;
  --z-nav:   100;
  --z-modal: 800;
  --z-toast: 900;
}

/* ─── Reduced motion respect ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --tx-fast: 0s; --tx: 0s; --tx-slow: 0s; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Toast (universal) ─────────────────────────────────────────── */
.lb-toast-host {
  position: fixed; top: 22px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  width: min(92vw, 420px);
}
.lb-toast {
  pointer-events: auto;
  padding: 12px 18px 12px 14px;
  border-radius: var(--r);
  background: rgba(20,18,30,.94);
  color: #f6f4ef;
  font: 500 13px/1.4 var(--font-mono);
  letter-spacing: .01em;
  border: .5px solid var(--black-border-strong);
  box-shadow: var(--sh-4);
  display: grid; grid-template-columns: 18px 1fr;
  align-items: center; gap: 10px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--tx) , transform var(--tx);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  cursor: default;
}
.lb-toast.show { opacity: 1; transform: translateY(0); }
.lb-toast .lb-toast-icon {
  width: 18px; height: 18px; display: grid; place-items: center;
  font: 700 11px/1 var(--font-mono);
}
.lb-toast.success           { border-color: rgba(31,138,91,.45); }
.lb-toast.success .lb-toast-icon { color: var(--green); }
.lb-toast.error             { border-color: rgba(217,78,46,.55); }
.lb-toast.error   .lb-toast-icon { color: var(--coral); }
.lb-toast.info    .lb-toast-icon { color: var(--cyan); }

/* ─── Skeleton primitives ───────────────────────────────────────── */
@keyframes lb-shimmer {
  0%   { background-position:  -400px 0; }
  100% { background-position:   400px 0; }
}
.lb-skeleton {
  display: block; border-radius: var(--r-sm);
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.10) 40%,
    rgba(255,255,255,.04) 80%);
  background-size: 800px 100%;
  animation: lb-shimmer 1.4s linear infinite;
}
.lb-skeleton.light {
  background: linear-gradient(90deg,
    rgba(31,20,16,.06) 0%,
    rgba(31,20,16,.12) 40%,
    rgba(31,20,16,.06) 80%);
  background-size: 800px 100%;
}

/* ─── Universal interaction enhancements ───────────────────────── */
/* Press / active ripple-feel on any [data-press] element. */
[data-press] { transition: transform var(--tx-fast); }
[data-press]:active:not([disabled]) { transform: scale(.97); }

/* Animated underline for inline links. */
.lb-link {
  position: relative; text-decoration: none; color: inherit;
}
.lb-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1.5px; background: currentColor; opacity: .9;
  transition: right var(--tx);
}
.lb-link:hover::after { right: 0; }

/* Generic focus ring (additive). */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in oklab, var(--neon-pink) 75%, var(--cyan));
  outline-offset: 2px;
  border-radius: 4px;
}

/* Pulse used by status dots. */
@keyframes lb-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255,78,163,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,78,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,78,163,0); }
}
.lb-pulse { animation: lb-pulse-ring 1.6s ease-out infinite; }

/* Shimmer flow for premium banners. */
@keyframes lb-shine {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%);  }
  100% { transform: translateX(100%);  }
}
.lb-shine {
  position: relative; overflow: hidden;
}
.lb-shine::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,.28) 50%,
    transparent 70%);
  transform: translateX(-100%);
  animation: lb-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}

/* Gradient flow for primary CTAs (apply with .lb-cta-flow). */
@keyframes lb-cta-flow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
.lb-cta-flow {
  background-size: 200% 200%;
  animation: lb-cta-flow 6s ease-in-out infinite;
}

/* Typewriter caret. */
.lb-caret::after {
  content: ''; display: inline-block;
  width: .55ch; height: 1em; vertical-align: -0.16em; margin-left: 2px;
  background: currentColor; opacity: .6;
  animation: lb-caret-blink 1s steps(2,end) infinite;
}
@keyframes lb-caret-blink {
  0%, 50% { opacity: .65; } 51%, 100% { opacity: 0; }
}

/* Tooltip primitive. */
.lb-tip {
  position: absolute; pointer-events: none;
  padding: 10px 12px; border-radius: 10px; min-width: 160px; max-width: 240px;
  background: rgba(10,10,10,.94); color: #f6f4ef;
  font: 500 12px/1.45 var(--font-mono);
  border: .5px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--tx), transform var(--tx);
  z-index: var(--z-modal);
}
.lb-tip.show { opacity: 1; transform: translateY(0); }
.lb-tip h5 { font: 700 13px/1.2 var(--font-pink-serif); margin: 0 0 4px; color: #fff; }
.lb-tip small { color: var(--neon-pink); font-weight: 600; letter-spacing: .04em; }
.lb-tip p { margin-top: 6px; font-size: 11px; color: rgba(246,244,239,.65); }

/* ─── Scroll-progress strip ───────────────────────────────────── */
.lb-scroll-strip {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--neon-pink), var(--cyan));
  transform: scaleX(0); transform-origin: 0 0;
  z-index: var(--z-toast);
  transition: transform .12s linear;
}