/* ==========================================================================
   WellWave — Liquid Glass 2026 Materials  (THE SIGNATURE)
   --------------------------------------------------------------------------
   Every elevated surface is built from FOUR stacked layers:
     1. EFFECT  backdrop-filter: blur + saturate  (saturate is mandatory —
                blur without saturate reads opaque & dirty)
     2. TINT    flat color film at a tuned opacity
     3. SHINE   dual inset highlight (top-left bright + bottom-right rim)
     4. EDGE    1px rim-light captured around the perimeter
   Five depth levels L0–L4 escalate blur, saturation, tint & radius together.
   Light = "Regular" recipe (high tint, 3-40px blur). Dark = "Clear" recipe
   (low tint, lighter blur, stronger borders for OLED depth).
   ========================================================================== */

:root {
  /* ── Blur scale ───────────────────────────────────────────────── */
  --ww-glass-l0-blur: 12px;   /* clear — chips, controls over imagery */
  --ww-glass-l1-blur: 20px;   /* subtle — section backdrops */
  --ww-glass-l2-blur: 40px;   /* default — cards (canonical) */
  --ww-glass-l3-blur: 60px;   /* thick — popovers, sheets */
  --ww-glass-l4-blur: 60px;   /* elevated — nav, modals */

  /* ── Saturation scale (mandatory companion to blur) ──────────── */
  --ww-glass-l0-saturate: 130%; /* @kind other */
  --ww-glass-l1-saturate: 150%; /* @kind other */
  --ww-glass-l2-saturate: 180%; /* @kind other */
  --ww-glass-l3-saturate: 200%; /* @kind other */
  --ww-glass-l4-saturate: 200%; /* @kind other */

  /* ── Tint opacity per level (LIGHT — Regular recipe) ─────────── */
  --ww-glass-l0-alpha: 0.16; /* @kind other */
  --ww-glass-l1-alpha: 0.16; /* @kind other */
  --ww-glass-l2-alpha: 0.26; /* @kind other */
  --ww-glass-l3-alpha: 0.46; /* @kind other */
  --ww-glass-l4-alpha: 0.56; /* @kind other */

  /* Composited filter + tint per level */
  --ww-glass-l0-filter: blur(var(--ww-glass-l0-blur)) saturate(var(--ww-glass-l0-saturate));
  --ww-glass-l1-filter: blur(var(--ww-glass-l1-blur)) saturate(var(--ww-glass-l1-saturate));
  --ww-glass-l2-filter: blur(var(--ww-glass-l2-blur)) saturate(var(--ww-glass-l2-saturate));
  --ww-glass-l3-filter: blur(var(--ww-glass-l3-blur)) saturate(var(--ww-glass-l3-saturate));
  --ww-glass-l4-filter: blur(var(--ww-glass-l4-blur)) saturate(var(--ww-glass-l4-saturate));
  --ww-glass-l0-tint: rgb(var(--ww-surface-base-rgb) / var(--ww-glass-l0-alpha));
  --ww-glass-l1-tint: rgb(var(--ww-surface-base-rgb) / var(--ww-glass-l1-alpha));
  --ww-glass-l2-tint: rgb(var(--ww-surface-base-rgb) / var(--ww-glass-l2-alpha));
  --ww-glass-l3-tint: rgb(var(--ww-surface-base-rgb) / var(--ww-glass-l3-alpha));
  --ww-glass-l4-tint: rgb(var(--ww-surface-base-rgb) / var(--ww-glass-l4-alpha));

  /* ── Borders ──────────────────────────────────────────────────── */
  --ww-glass-border-subtle: rgb(var(--ww-text-primary-rgb) / 0.06);
  --ww-glass-border: rgb(var(--ww-text-primary-rgb) / 0.1);
  --ww-glass-border-strong: rgb(var(--ww-text-primary-rgb) / 0.16);

  /* ── Shine: dual inset highlight + bottom shade (the rim light) ─ */
  --ww-glass-edge: inset 0 1px 1px rgb(255 255 255 / 0.8), inset 0 -1px 1px rgb(0 0 0 / 0.05); /* @kind shadow */

  /* ── Specular highlight (top-left bright wash, ::after layer) ─── */
  --ww-glass-specular: linear-gradient(
    135deg, rgb(255 255 255 / 0.72) 0%, rgb(255 255 255 / 0.12) 40%, transparent 60%); /* @kind color */

  /* ── Canonical Lucas-Romero recipe (awesome-liquid-glass manual) ─ */
  --ww-glass-shine-canonical:
    inset 2px 2px 1px 0 rgb(255 255 255 / 0.5),
    inset -1px -1px 1px 1px rgb(255 255 255 / 0.5); /* @kind shadow */
  --ww-glass-shadow-canonical: 0 6px 6px rgb(0 0 0 / 0.2), 0 0 20px rgb(0 0 0 / 0.1);
  --ww-glass-tint-canonical: rgb(255 255 255 / 0.25);
  --ww-glass-effect-canonical: blur(3px) saturate(180%); /* @kind other */

  --ww-glass-fallback-bg: rgb(var(--ww-surface-page-rgb) / 0.96);
}

/* ── DARK — "Clear" recipe: lower tint, lighter blur, stronger rims ── */
:root[data-theme='dark'],
:root.dark {
  --ww-glass-l0-alpha: 0.6; /* @kind other */
  --ww-glass-l1-alpha: 0.7; /* @kind other */
  --ww-glass-l2-alpha: 0.8; /* @kind other */
  --ww-glass-l3-alpha: 0.9; /* @kind other */
  --ww-glass-l4-alpha: 0.92; /* @kind other */
  --ww-glass-border-subtle: rgb(255 255 255 / 0.1);
  --ww-glass-border: rgb(255 255 255 / 0.16);
  --ww-glass-border-strong: rgb(255 255 255 / 0.22);
  --ww-glass-edge: inset 0 1px 1px rgb(255 255 255 / 0.16), inset 0 -1px 1px rgb(0 0 0 / 0.4); /* @kind shadow */
  --ww-glass-specular: linear-gradient(
    135deg, rgb(255 255 255 / 0.26) 0%, rgb(255 255 255 / 0.06) 42%, transparent 64%); /* @kind color */
  --ww-glass-shine-canonical:
    inset 2px 2px 1px 0 rgb(255 255 255 / 0.35),
    inset -1px -1px 1px 1px rgb(255 255 255 / 0.18); /* @kind shadow */
  --ww-glass-shadow-canonical: 0 6px 6px rgb(0 0 0 / 0.45), 0 0 22px rgb(0 0 0 / 0.32);
  --ww-glass-tint-canonical: rgb(255 255 255 / 0.1);
  --ww-glass-effect-canonical: blur(8px) saturate(165%); /* @kind other */
  --ww-glass-fallback-bg: rgb(var(--ww-surface-base-rgb) / 0.94);
}

/* --------------------------------------------------------------------------
   GLASS UTILITY CLASSES — drop on any element to get the material.
   .ww-glass-{clear|subtle|default|elevated} map to L0/L1/L2/L4.
   -------------------------------------------------------------------------- */
.ww-glass-clear,
.ww-glass-subtle,
.ww-glass-default,
.ww-glass-elevated {
  position: relative;
  border: 1px solid var(--ww-glass-border);
  box-shadow: var(--ww-glass-edge), var(--ww-shadow-l2);
  transition:
    background-color var(--ww-motion-duration-base) var(--ww-motion-ease-standard),
    box-shadow var(--ww-motion-duration-base) var(--ww-motion-ease-standard),
    transform var(--ww-motion-duration-base) var(--ww-motion-ease-standard);
}
.ww-glass-clear {
  background: var(--ww-glass-l0-tint);
  -webkit-backdrop-filter: var(--ww-glass-l0-filter);
  backdrop-filter: var(--ww-glass-l0-filter);
  border-radius: var(--ww-radius-glass-sm);
  box-shadow: var(--ww-glass-edge), var(--ww-shadow-l1);
}
.ww-glass-subtle {
  background: var(--ww-glass-l1-tint);
  -webkit-backdrop-filter: var(--ww-glass-l1-filter);
  backdrop-filter: var(--ww-glass-l1-filter);
  border-radius: var(--ww-radius-glass-md);
}
.ww-glass-default {
  background: var(--ww-glass-l2-tint);
  -webkit-backdrop-filter: var(--ww-glass-l2-filter);
  backdrop-filter: var(--ww-glass-l2-filter);
  border-radius: var(--ww-radius-glass-lg);
}
.ww-glass-elevated {
  background: var(--ww-glass-l4-tint);
  -webkit-backdrop-filter: var(--ww-glass-l4-filter);
  backdrop-filter: var(--ww-glass-l4-filter);
  border-radius: var(--ww-radius-glass-lg);
  border-color: var(--ww-glass-border-strong);
  box-shadow: var(--ww-glass-edge), var(--ww-shadow-l4);
}

/* Specular highlight overlay — add alongside a glass class on hero cards. */
.ww-specular {
  position: relative;
  overflow: hidden;
}
.ww-specular::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ww-glass-specular);
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.85;
}