/* ══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS — design tokens & theme system
   Loaded AFTER the legacy CSS so these values win. Adds the glass token system
   and remaps the page background + base text per theme. Brand tokens
   (--color-teal / --color-coral / --color-navy …) still come from variables.css.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --teal-br: #12b3c9;
  --aqua:    #5ee7df;
  --ease-theme: cubic-bezier(0.4, 0, 0.2, 1);

  /* Bundled glass-recipe pieces. They resolve per-theme via the --c-* and
     --glass-reflex-* tokens set in the theme blocks below. */
  --glass-blur: blur(16px) saturate(var(--saturation));
  --glass-bevel:
    inset 0 0 0 1px       color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0 -2px  color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0  color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 3px 4px -2px     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 1px 5px 0   color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 6px 16px 0  color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);

  /* Thinner rim for large panels (section slabs, cart) — lighter than the full bevel */
  --glass-bevel-soft:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 7%), transparent),
    inset 0 1.5px 1px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 55%), transparent),
    inset 0 -1px 1px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent),
    0 8px 24px rgba(0, 0, 0, 0.10);
}

html[data-theme="light"] {
  --bg1: #dcebfb; --bg2: #eef5fc; --bg3: #f6fbff;
  --lg-text:  #0d2236;
  --lg-muted: rgba(13, 34, 54, 0.62);
  --glass-bg:   color-mix(in srgb, var(--c-glass) 46%, transparent);
  --glass-bg-2: color-mix(in srgb, var(--c-glass) 60%, transparent);
  --blob-op: 0.5;

  --c-glass: #cdd9e6; --c-light: #fff; --c-dark: #0a1a2c;
  --c-content: #0d2236; --c-action: #0a7a8f;
  --glass-reflex-dark: 1; --glass-reflex-light: 1; --saturation: 170%;

  --st-trending: #e11d48;
  --st-new: #2563eb;
  --st-available: #16a34a;
  --st-limited: #d97706;
  --st-unavailable: #6b7280;

  /* Make legacy text tokens theme-aware so inline color:var(--color-muted) adapts */
  --color-text: #1a1a2e;
  --color-muted: #6b7280;
  --cart-surface: rgba(255, 255, 255, 0.82);
  --field-error: #dc2626;
  --input-fill: #e9eef6;
  /* opaque frosted glass for mobile (drops backdrop-filter cost, keeps the look) */
  --glass-solid: color-mix(in srgb, var(--c-glass) 86%, var(--bg2));
}

html[data-theme="dark"] {
  --bg1: #0a0e1c; --bg2: #0b1226; --bg3: #0d1730;
  --lg-text:  #f3f7ff;
  --lg-muted: rgba(243, 247, 255, 0.62);
  --glass-bg:   color-mix(in srgb, var(--c-glass) 16%, transparent);
  --glass-bg-2: color-mix(in srgb, var(--c-glass) 24%, transparent);
  --blob-op: 0.55;

  --c-glass: #aebfd2; --c-light: #fff; --c-dark: #000;
  --c-content: #e1e1e1; --c-action: #5fd6e8;
  --glass-reflex-dark: 2; --glass-reflex-light: 0.35; --saturation: 160%;

  --st-trending: #fb7185;
  --st-new: #60a5fa;
  --st-available: #4ade80;
  --st-limited: #fbbf24;
  --st-unavailable: #9ca3af;

  /* Theme-aware legacy text tokens + dark cart surface */
  --color-text: #f3f7ff;
  --color-muted: rgba(243, 247, 255, 0.58);
  --cart-surface: rgba(16, 22, 42, 0.86);
  --field-error: #ff6b6b;
  /* cream is only ever used as a surface fill — make it a faint dark panel here */
  --color-cream: rgba(255, 255, 255, 0.07);
  --input-fill: #232b42;
  --glass-solid: color-mix(in srgb, var(--bg2) 88%, var(--c-glass));
}

/* Page background + base text per theme (overrides legacy body colours).
   Solid colour (not a gradient) so it transitions smoothly AND is captured
   correctly by backdrop-filter; the animated blobs supply the colour depth. */
html[data-theme] body {
  background: var(--bg2);
  color: var(--lg-text);
  transition: background-color 0.5s var(--ease-theme), color 0.5s var(--ease-theme);
}