/* liquid-glass.css — anatomy + tokens for liquid-glass.js.
 *
 * Port of @liqui-design/glass's glass.css + tokens (MIT © 2026 Fan Li).
 * Token names are liqui's own (--lq-*), so a liqui theme drops straight in.
 *
 * Anatomy, back to front (all inserted by liquid-glass.js):
 *   backdrop  blur()+saturate() — never changes after first paint
 *   refract   backdrop-filter:url(#svg) — displacement ONLY (split from blur on purpose)
 *   tint      gradient that carries legibility, opacity scaled by `frost`
 *   specular  canvas-baked rim light (light + dark versions, CSS picks one)
 *   shine     cheap inset-shadow rim — the only rim on frost/clear tiers
 *   content   the element's own children, painted above every layer
 */

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

:root {
  --lq-text: rgba(28, 28, 40, 0.95);
  --lq-text-dim: rgba(28, 28, 40, 0.55);
  --lq-tint: rgba(255, 255, 255, 0.48);
  --lq-tint-deep: rgba(255, 255, 255, 0.14);
  --lq-rim-hi: rgba(255, 255, 255, 0.85);
  --lq-rim-lo: rgba(255, 255, 255, 0.28);
  --lq-shadow: 0 24px 60px rgba(10, 15, 40, 0.35), 0 4px 14px rgba(10, 15, 40, 0.18);
  --lq-highlight: rgba(255, 255, 255, 0.5);
  --lq-control: rgba(255, 255, 255, 0.72);
  --lq-control-rim: rgba(28, 28, 40, 0.16);
  --lq-accent: #2f6bff;
  --lq-danger: #e5484d;
  --lq-danger-text: #c1272c;
  --lq-scrim: rgba(12, 14, 28, 0.32);
  --lq-clear-wash: rgba(255, 255, 255, 0.55);
  --lq-clear-wash-deep: rgba(255, 255, 255, 0.42);
}

/* Dark: explicit class/attribute (liqui + next-themes conventions)… */
[data-theme='dark'],
.dark {
  --lq-text: rgba(245, 246, 255, 0.96);
  --lq-text-dim: rgba(245, 246, 255, 0.55);
  --lq-tint: rgba(30, 32, 46, 0.62);
  --lq-tint-deep: rgba(18, 20, 32, 0.4);
  --lq-rim-hi: rgba(255, 255, 255, 0.5);
  --lq-rim-lo: rgba(255, 255, 255, 0.12);
  --lq-shadow: 0 24px 60px rgba(0, 0, 5, 0.55), 0 4px 14px rgba(0, 0, 5, 0.35);
  --lq-highlight: rgba(255, 255, 255, 0.18);
  --lq-control: rgba(126, 128, 146, 0.3);
  --lq-control-rim: rgba(255, 255, 255, 0.22);
  --lq-accent: #6f9dff;
  --lq-danger: #ff7076;
  --lq-danger-text: #ff7076;
  --lq-scrim: rgba(0, 0, 6, 0.48);
  --lq-clear-wash: rgba(30, 32, 46, 0.52);
  --lq-clear-wash-deep: rgba(18, 20, 32, 0.47);
}

/* …and the OS preference, unless the page pinned light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not(.light) {
    --lq-text: rgba(245, 246, 255, 0.96);
    --lq-text-dim: rgba(245, 246, 255, 0.55);
    --lq-tint: rgba(30, 32, 46, 0.62);
    --lq-tint-deep: rgba(18, 20, 32, 0.4);
    --lq-rim-hi: rgba(255, 255, 255, 0.5);
    --lq-rim-lo: rgba(255, 255, 255, 0.12);
    --lq-shadow: 0 24px 60px rgba(0, 0, 5, 0.55), 0 4px 14px rgba(0, 0, 5, 0.35);
    --lq-highlight: rgba(255, 255, 255, 0.18);
    --lq-control: rgba(126, 128, 146, 0.3);
    --lq-control-rim: rgba(255, 255, 255, 0.22);
    --lq-accent: #6f9dff;
    --lq-danger: #ff7076;
    --lq-danger-text: #ff7076;
    --lq-scrim: rgba(0, 0, 6, 0.48);
    --lq-clear-wash: rgba(30, 32, 46, 0.52);
    --lq-clear-wash-deep: rgba(18, 20, 32, 0.47);
  }
}

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

@layer base {
  .lg {
    position: relative;
    isolation: isolate; /* own stacking context: layers sit under content */
    border-radius: var(--lq-radius, 16px);
    corner-shape: squircle; /* Chromium 139+; map is generated on the same curve */
    color: var(--lq-text, inherit);
    background: transparent;
  }
}

.lg--elevated {
  box-shadow: var(--lq-shadow);
}

/* Negative z-index inside an isolated context: layers paint above whatever is
   behind the surface but BELOW the element's own content — including bare text
   nodes, which a positive z-index would bury. No wrapper element needed. */
.lg > .lg__layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  corner-shape: inherit;
  pointer-events: none;
}

.lg__tint {
  background: linear-gradient(135deg, var(--lq-tint), var(--lq-tint-deep));
}

/* Clear tier has no backdrop-filter to quiet the background: composite a
   neutral wash UNDER the tint (an override would kill accent retints). */
.lg--clear > .lg__tint {
  background-image:
    linear-gradient(135deg, var(--lq-tint), var(--lq-tint-deep)),
    linear-gradient(135deg, var(--lq-clear-wash), var(--lq-clear-wash-deep));
}

.lg__specular-light,
.lg__specular-dark {
  background-size: 100% 100%;
}
.lg__specular-dark { display: none; }
[data-theme='dark'] .lg__specular-light, .dark .lg__specular-light { display: none; }
[data-theme='dark'] .lg__specular-dark, .dark .lg__specular-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not(.light) .lg__specular-light { display: none; }
  :root:not([data-theme='light']):not(.light) .lg__specular-dark { display: block; }
}

/* Cheap rim: bright top-left catch-light, faint bottom counter-light. */
.lg__shine {
  box-shadow:
    inset 0 1px 1px var(--lq-rim-hi),
    inset 1px 0 1px 0.5px color-mix(in srgb, var(--lq-rim-hi) 60%, transparent),
    inset -1px -1px 1px var(--lq-rim-lo);
}

/* Refraction fades in only while a fresh filter's map decodes. */
.lg--cold > .lg__refract,
.lg--cold > .lg__specular-light,
.lg--cold > .lg__specular-dark {
  animation: lg-fade-in 0.18s ease-out;
}
@keyframes lg-fade-in { from { opacity: 0; } }

/* ── Accessibility: honour the user, not the mood board ─────────────────── */

@media (prefers-reduced-transparency: reduce) {
  .lg > .lg__backdrop,
  .lg > .lg__refract { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .lg > .lg__tint { opacity: 1 !important; background: var(--lq-solid, Canvas) !important; }
  .lg > .lg__specular-light, .lg > .lg__specular-dark { display: none !important; }
}

@media (prefers-contrast: more) {
  .lg > .lg__tint { opacity: 1 !important; }
  .lg { outline: 1px solid color-mix(in srgb, var(--lq-text) 35%, transparent); outline-offset: -1px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg--cold > .lg__layer { animation: none; }
}