/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS DESIGN SYSTEM
   Unified UI layer for soulin.co + social.soulin.co
   Inspired by Apple's Liquid Glass (WWDC 2025)

   Three-layer composition: highlight + shadow + illumination
   SVG refraction via #liquid-glass-distortion filter
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────────────── */

:root {
  /* Glass surface */
  --lg-bg: rgba(255, 255, 255, 0.15);
  --lg-blur: 2px;
  --lg-saturate: 180%;

  /* Borders */
  --lg-border-width: 1px;
  --lg-border-color: rgba(255, 255, 255, 0.8);

  /* Radius */
  --lg-radius: 2rem;
  --lg-radius-sm: 1rem;
  --lg-radius-pill: 999px;

  /* Shadows */
  --lg-shadow-outer: 0 8px 32px rgba(31, 38, 135, 0.15);
  --lg-shadow-inner: inset 0 4px 20px rgba(255, 255, 255, 0.3);
  --lg-shadow-hover: 0 12px 40px rgba(31, 38, 135, 0.22);

  /* Three-layer gradients */
  --lg-highlight: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  --lg-shadow-gradient: linear-gradient(
    315deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0) 50%
  );
  --lg-illumination: radial-gradient(
    ellipse at 30% 20%,
    rgba(255, 255, 255, 0.25),
    transparent 70%
  );

  /* Shine / interaction */
  --lg-shine-opacity: 0;
  --lg-shine-opacity-hover: 0.6;

  /* Motion */
  --lg-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* SVG filter reference */
  --lg-distortion-filter: url(#liquid-glass-distortion);
}

/* ── Dark Mode Overrides ───────────────────────────────────────────────── */

.dark {
  --lg-bg: rgba(12, 18, 54, 0.34);
  --lg-saturate: 100%;
  --lg-border-color: rgba(255, 255, 255, 0.14);
  --lg-shadow-outer: 0 8px 32px rgba(0, 0, 0, 0.3);
  --lg-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lg-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4);
  --lg-highlight: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  --lg-shadow-gradient: linear-gradient(
    315deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0) 50%
  );
  --lg-illumination: radial-gradient(
    ellipse at 30% 20%,
    rgba(255, 255, 255, 0.08),
    transparent 70%
  );
}

/* ── Base Surface ──────────────────────────────────────────────────────── */

.lg-surface {
  position: relative;
  background: var(--lg-bg);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: var(--lg-border-width) solid var(--lg-border-color);
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-shadow-outer), var(--lg-shadow-inner);
  transition: transform var(--lg-transition), box-shadow var(--lg-transition);
  overflow: hidden;
  isolation: isolate;
}

/* Layer 1+2: Highlight + Shadow gradients */
.lg-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-highlight), var(--lg-shadow-gradient);
  pointer-events: none;
  z-index: 1;
}

/* Layer 3: Illumination / specular shine */
.lg-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-illumination);
  opacity: var(--lg-shine-opacity);
  transition: opacity var(--lg-transition);
  pointer-events: none;
  filter: blur(1px) brightness(115%);
  z-index: 2;
}

/* Child content above pseudo-elements */
.lg-surface > * {
  position: relative;
  z-index: 3;
}

/* Hover: shine appears, subtle lift */
.lg-surface:hover::after {
  opacity: var(--lg-shine-opacity-hover);
}

.lg-surface:hover {
  transform: translateY(-2px);
  box-shadow: var(--lg-shadow-hover), var(--lg-shadow-inner),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Press: depth */
.lg-surface:active {
  transform: translateY(0px) scale(0.995);
}

/* ── Variants ──────────────────────────────────────────────────────────── */

/* Navigation bar */
.lg-surface--nav {
  border-radius: 0;
  --lg-bg: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.lg-surface--nav::before,
.lg-surface--nav::after {
  display: none;
}

.lg-surface--nav:hover {
  transform: none;
  box-shadow: none;
}

.lg-surface--nav.scrolled {
  --lg-bg: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(20px) saturate(var(--lg-saturate));
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 12px rgba(31, 38, 135, 0.06);
}

.dark .lg-surface--nav.scrolled {
  --lg-bg: rgba(12, 18, 54, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Card — slightly more inset on narrow screens so text doesn’t hug the border */
.lg-surface--card {
  padding: clamp(1.125rem, 3.5vw, 1.75rem);
}

/* Modal */
.lg-surface--modal {
  --lg-blur: 8px;
  --lg-bg: rgba(255, 255, 255, 0.25);
  --lg-shadow-outer: 0 16px 48px rgba(31, 38, 135, 0.25);
}

.dark .lg-surface--modal {
  --lg-bg: rgba(255, 255, 255, 0.10);
}

/* Button */
.lg-surface--button {
  border-radius: var(--lg-radius-pill);
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  user-select: none;
}

.lg-surface--button::before {
  display: none;
}

.lg-surface--button:hover {
  transform: translateY(-1px);
}

.lg-surface--button:active {
  transform: translateY(0) scale(0.98);
}

/* Section — full-width frosted glass background for page sections */
.lg-surface--section {
  border-radius: 0;
  border: none;
  box-shadow: none;
  --lg-bg: rgba(255, 255, 255, 0.75);
  --lg-blur: 50px;
  overflow: visible;
}

.lg-surface--section::before,
.lg-surface--section::after {
  display: none;
}

.lg-surface--section:hover {
  transform: none;
  box-shadow: none;
}

.dark .lg-surface--section {
  --lg-bg: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Page — frosted background for centered page layouts (login, members, etc.) */
.lg-surface--page {
  border-radius: 0;
  border: none;
  box-shadow: none;
  --lg-bg: rgba(255, 255, 255, 0.92);
  --lg-blur: 50px;
  overflow: visible;
}

.lg-surface--page::before,
.lg-surface--page::after {
  display: none;
}

.lg-surface--page:hover {
  transform: none;
  box-shadow: none;
}

.dark .lg-surface--page {
  --lg-bg: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Item — small inline glass element (badges, chips, mini cards) */
.lg-surface--item {
  --lg-radius: 1rem;
  --lg-bg: rgba(255, 255, 255, 0.08);
  --lg-border-color: rgba(255, 255, 255, 0.12);
  --lg-shadow-outer: none;
  --lg-shadow-inner: none;
}

.lg-surface--item::before {
  display: none;
}

.lg-surface--item:hover {
  transform: translateY(-1px);
  box-shadow: var(--lg-shadow-outer);
}

/* Static — no hover animation (for sections, containers) */
.lg-surface--static:hover {
  transform: none;
  box-shadow: var(--lg-shadow-outer), var(--lg-shadow-inner);
}

.lg-surface--static:hover::after {
  opacity: var(--lg-shine-opacity);
}

/* Distorted — SVG refraction (use sparingly) */
.lg-surface--distorted {
  filter: var(--lg-distortion-filter);
}

/* ── Spacing System (8px grid, Apple-style) ────────────────────────────── */

:root {
  --section-py: clamp(3.25rem, 9vw, 8rem);
  --section-px: clamp(1.25rem, 5vw, 4rem);
  --section-gap: clamp(2.5rem, 6vw, 6rem);
  --content-max: 1200px;
  --content-narrow: 720px;
  --hero-min-h: 90dvh;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED COMPONENTS — Apple Liquid Glass
   Buttons, Inputs, Toolbars, Background Extension
   Consistent across soulin.co + social.soulin.co
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────────────── */
/* Apple Liquid Glass: pill-shaped, generous padding, light weight,
   concentric rounding, glass material on hover */

.lg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;                     /* 44px — mobile touch target */
  height: 2.75rem;
  padding: 0 1.25rem;
  border: none;
  border-radius: var(--lg-radius-pill);    /* pill shape */
  font-size: 0.6875rem;                    /* 11px */
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--lg-transition), box-shadow var(--lg-transition),
    background var(--lg-transition), opacity var(--lg-transition);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 480px) {
  .lg-btn {
    height: auto;
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0.75rem 1rem;
    white-space: normal;
    line-height: 1.35;
    text-align: center;
  }
}

.lg-btn:active {
  transform: scale(0.97);
}

/* Primary — solid accent */
.lg-btn--primary {
  background: hsl(227 69% 40%);
  color: hsl(0 0% 96%);
}

.lg-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(32, 62, 174, 0.3);
}

.dark .lg-btn--primary {
  background: hsl(0 0% 96%);
  color: hsl(227 69% 40%);
}

.dark .lg-btn--primary:hover {
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}

/* Secondary — frosted glass */
.lg-btn--secondary {
  background: rgba(32, 62, 174, 0.06);
  color: hsl(227 69% 40%);
  border: 1px solid rgba(32, 62, 174, 0.12);
}

.lg-btn--secondary:hover {
  background: rgba(32, 62, 174, 0.10);
  transform: translateY(-1px);
}

.dark .lg-btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: hsl(0 0% 96%);
  border-color: rgba(255, 255, 255, 0.15);
}

.dark .lg-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Ghost — text only, no background */
.lg-btn--ghost {
  background: transparent;
  color: hsl(227 69% 40% / 0.6);
  padding: 0 0.75rem;
}

.lg-btn--ghost:hover {
  color: hsl(227 69% 40%);
}

.dark .lg-btn--ghost {
  color: hsl(0 0% 96% / 0.6);
}

.dark .lg-btn--ghost:hover {
  color: hsl(0 0% 96%);
}

/* Glass — Apple Liquid Glass material button */
.lg-btn--glass {
  background: var(--lg-bg);
  color: hsl(227 69% 40%);
  border: 1px solid var(--lg-border-color);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
}

.lg-btn--glass:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1);
}

.dark .lg-btn--glass {
  color: hsl(0 0% 96%);
}

/* Size variants */
.lg-btn--sm {
  min-height: 2.75rem;
  height: 2.75rem;
  padding: 0 0.875rem;
  font-size: 0.625rem;                     /* 10px */
}

@media (min-width: 640px) {
  .lg-btn--sm {
    min-height: 2rem;
    height: 2rem;
  }
}

.lg-btn--lg {
  height: 3rem;                            /* 48px — extra-large per Apple */
  padding: 0 1.75rem;
  font-size: 0.75rem;                      /* 12px */
}

/* ── Inputs ───────────────────────────────────────────────────────────── */
/* Apple Liquid Glass: rounded, generous padding, glass-like background,
   larger row height, increased corner radius */

.lg-input,
.lg-textarea,
.lg-select {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  height: 2.75rem;                         /* 44px — Apple touch target */
  padding: 0 1rem;
  border: 1px solid rgba(32, 62, 174, 0.10);
  border-radius: var(--lg-radius-sm);      /* 1rem = 16px concentric rounding */
  background: rgba(32, 62, 174, 0.03);
  color: hsl(227 69% 40%);
  font-size: 0.8125rem;                    /* 13px */
  font-weight: 300;
  letter-spacing: 0.04em;
  transition: border-color var(--lg-transition), box-shadow var(--lg-transition);
  outline: none;
}

.lg-input::placeholder,
.lg-textarea::placeholder {
  color: hsl(227 69% 40% / 0.35);
  font-weight: 300;
}

.lg-input:focus,
.lg-textarea:focus,
.lg-select:focus {
  border-color: hsl(227 69% 40% / 0.3);
  box-shadow: 0 0 0 3px hsl(227 69% 40% / 0.06);
}

@media (max-width: 639px) {
  .lg-input,
  .lg-select {
    font-size: 1rem; /* 16px — avoids iOS zoom on focus */
  }
}

.lg-textarea {
  height: auto;
  min-height: 5.5rem;                      /* 88px */
  padding: 0.75rem 1rem;
  resize: vertical;
}

.lg-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23203EAE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Dark mode inputs */
.dark .lg-input,
.dark .lg-textarea,
.dark .lg-select {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: hsl(0 0% 96%);
}

.dark .lg-input::placeholder,
.dark .lg-textarea::placeholder {
  color: hsl(0 0% 96% / 0.35);
}

.dark .lg-input:focus,
.dark .lg-textarea:focus,
.dark .lg-select:focus {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.dark .lg-select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23F5F5F5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Form label */
.lg-label {
  display: block;
  font-size: 0.6875rem;                    /* 11px */
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(227 69% 40% / 0.6);
  margin-bottom: 0.5rem;
}

.dark .lg-label {
  color: hsl(0 0% 96% / 0.6);
}

/* Form section — increased corner radius per Apple */
.lg-form-section {
  background: var(--lg-bg);
  border: 1px solid var(--lg-border-color);
  border-radius: var(--lg-radius);         /* 2rem — generous rounding */
  padding: clamp(1.375rem, 4vw, 2rem);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */
/* Apple Liquid Glass: group related items in shared glass capsules,
   gaps between groups, icons preferred over text */

.lg-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem;
  border-radius: var(--lg-radius-pill);
  background: var(--lg-bg);
  border: 1px solid var(--lg-border-color);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
}

.lg-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: var(--lg-radius-pill);
  background: rgba(32, 62, 174, 0.04);
}

.dark .lg-toolbar-group {
  background: rgba(255, 255, 255, 0.06);
}

.lg-toolbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: hsl(227 69% 40% / 0.6);
  cursor: pointer;
  transition: background var(--lg-transition), color var(--lg-transition);
}

.lg-toolbar-item:hover {
  background: rgba(32, 62, 174, 0.08);
  color: hsl(227 69% 40%);
}

.lg-toolbar-item.active {
  background: hsl(227 69% 40%);
  color: hsl(0 0% 96%);
}

.dark .lg-toolbar-item {
  color: hsl(0 0% 96% / 0.6);
}

.dark .lg-toolbar-item:hover {
  background: rgba(255, 255, 255, 0.10);
  color: hsl(0 0% 96%);
}

.dark .lg-toolbar-item.active {
  background: hsl(0 0% 96%);
  color: hsl(227 69% 40%);
}

/* Toolbar separator — gap between groups */
.lg-toolbar-sep {
  width: 1px;
  height: 1.25rem;
  background: rgba(32, 62, 174, 0.10);
  margin: 0 0.25rem;
}

.dark .lg-toolbar-sep {
  background: rgba(255, 255, 255, 0.12);
}

/* ── Background Extension Effect ──────────────────────────────────────── */
/* Apple Liquid Glass: content visually extends behind glass panels.
   The panel mirrors and blurs adjacent content for edge-to-edge feel. */

.lg-bg-extend {
  position: relative;
}

/* The extending panel — apply to sidebar, inspector, or nav panel */
.lg-bg-extend-panel {
  position: relative;
  background: var(--lg-bg);
  backdrop-filter: blur(40px) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(40px) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-border-color);
  z-index: 2;
}

/* Scroll edge effect — gradient fade at boundaries where content
   scrolls under glass bars (nav, toolbars) */
.lg-scroll-edge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  height: 24px;
  background: linear-gradient(
    to bottom,
    hsl(0 0% 96%) 0%,
    hsl(0 0% 96% / 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.dark .lg-scroll-edge::after {
  background: linear-gradient(
    to bottom,
    hsl(227 69% 40%) 0%,
    hsl(227 69% 40% / 0) 100%
  );
}

@media (hover: none), (pointer: coarse) {
  .lg-surface:hover {
    transform: none;
    box-shadow: var(--lg-shadow-outer), var(--lg-shadow-inner);
  }

  .lg-surface:hover::after {
    opacity: var(--lg-shine-opacity);
  }

  .lg-btn:hover,
  .lg-btn--primary:hover,
  .lg-btn--secondary:hover,
  .lg-btn--glass:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (max-width: 768px) {
  :root {
    --section-py: clamp(2.75rem, 8vw, 4.5rem);
    --hero-min-h: 76dvh;
  }

  .lg-surface--page,
  .lg-surface--section {
    --lg-blur: 24px;
  }
}

@media (max-width: 420px) {
  :root {
    --hero-min-h: 68dvh;
  }
}

/* Nav with background extension — content appears to flow behind */
.lg-surface--nav.scrolled.lg-bg-extend-panel {
  backdrop-filter: blur(40px) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(40px) saturate(var(--lg-saturate));
}

/* ── Accessibility ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lg-surface,
  .lg-surface::before,
  .lg-surface::after {
    transition: none !important;
    animation: none !important;
  }

  .lg-surface:hover {
    transform: none !important;
  }

  .lg-surface:active {
    transform: none !important;
  }
}

@media (prefers-contrast: more) {
  .lg-surface {
    background: rgba(255, 255, 255, 0.88);
    border: 2px solid rgba(0, 0, 0, 0.3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .dark .lg-surface {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
  }

  .lg-surface::before,
  .lg-surface::after {
    display: none;
  }
}

/* ── Browser Fallback ──────────────────────────────────────────────────── */

@supports not (backdrop-filter: blur(1px)) {
  .lg-surface {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .dark .lg-surface {
    background: rgba(255, 255, 255, 0.12);
  }
}

/* SVG distortion fallback on mobile (limited feDisplacementMap support) */
@media (max-width: 768px) {
  .lg-surface--distorted {
    filter: none;
    --lg-blur: 6px;
  }
}

/* ── Mobile Typography & Readability ─────────────────────────────────── */
/* font-thin (100) is too light on mobile screens — bump to font-light (300) */

@media (max-width: 639px) {
  :root {
    --section-px: clamp(1.5rem, 6vw, 4rem);
    --hero-min-h: 76dvh;
  }

  /* Footer: increase sizes and contrast on mobile */
  footer a,
  footer p {
    font-weight: 300 !important;
  }
}