/*
  Glassmorphism (docs/SPEC.md, "UI style: themes"): light frosted surfaces over a soft, low-saturation colour mesh
  of deep teal, steel blue and warm sand. Calm and premium, neither pink nor "tech blue". Token values first, so a
  nested [data-theme] preview follows its own wrapper; then the few page-level rules tokens cannot express.
  Contrast (body text 4.5:1, control borders and focus ring 3:1) is measured over the darkest blob through a surface.
*/

[data-theme="glass"] {
  --ui-bg: #eef2f6;
  --ui-surface: rgba(255, 255, 255, .62);
  --ui-surface-strong: rgba(255, 255, 255, .8); /* inputs, nested cards, offcanvas: near-solid, never blurred */
  --ui-surface-solid: #fff;
  --ui-text: #0f172a;
  --ui-text-muted: #475569;
  --ui-border: rgba(15, 23, 42, .14);
  --ui-row-hover: rgba(15, 118, 110, .06); /* admin table row under the pointer */

  /* Highlight edges are drawn as inner rings, so border widths (and the page layout) match every theme. */
  --ui-shadow-raised: 0 8px 32px rgba(15, 23, 42, .1), inset 0 0 0 1px rgba(255, 255, 255, .6);
  --ui-shadow-raised-sm: 0 1px 3px rgba(15, 23, 42, .1), 0 4px 14px rgba(15, 23, 42, .06), inset 0 0 0 1px rgba(255, 255, 255, .7);
  --ui-shadow-inset: inset 0 1px 2px rgba(15, 23, 42, .06), inset 0 0 0 1px rgba(51, 65, 85, .62);
  --ui-shadow-bar: 0 1px 0 rgba(255, 255, 255, .6), 0 6px 24px rgba(15, 23, 42, .06);
  --ui-radius: 20px;
  --ui-radius-sm: 14px;

  --ui-accent: #0f766e;
  --ui-accent-dark: #0b5953;
  --ui-accent-soft: rgba(15, 118, 110, .12);
  --ui-on-accent: #fff;
  --ui-secondary: #b45309;
  --ui-danger: #b42318;
  --ui-success: #166534;
  --ui-warning: #9a3412;
  /* T39 backorders: a row or banner waiting for stock. Text 7.9:1 on the background, border 4.8:1. */
  --ui-backorder-bg: #fff4e5;
  --ui-backorder-border: #c2410c;
  --ui-backorder-text: #8a2c0d;
  --ui-info: #1d4ed8;
  --ui-info-alt: #6d28d9;
  --ui-focus: 0 0 0 2px #fff, 0 0 0 4px #0f766e;
  --ui-swatch-outline: rgba(15, 23, 42, .5); /* edge of a white or beige colour dot */
  --ui-swatch-ring: 0 0 0 2px #fff, 0 0 0 4px #0f766e; /* ring round the chosen colour dot */
  --ui-whatsapp: #0e7a3f; /* WhatsApp green, darkened to 5.4:1 under white text */
  --ui-whatsapp-contrast: #fff;

  --ui-blur: blur(16px) saturate(160%);
  --ui-bg-mesh:
    radial-gradient(60% 55% at 0% 0%, rgba(20, 184, 166, .2), transparent 70%),
    radial-gradient(50% 45% at 100% 12%, rgba(59, 130, 246, .14), rgba(100, 116, 139, .08) 45%, transparent 72%),
    radial-gradient(60% 50% at 85% 100%, rgba(245, 194, 139, .34), transparent 70%),
    radial-gradient(45% 40% at 0% 88%, rgba(100, 116, 139, .14), transparent 70%);
  --ui-transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  --ui-lift: translateY(-1px);
}

/* Phones: a lighter blur keeps scrolling smooth. */
@media (max-width: 575.98px) {
  [data-theme="glass"] {
    --ui-blur: blur(10px) saturate(160%);
    --ui-shadow-raised: 0 6px 20px rgba(15, 23, 42, .1), inset 0 0 0 1px rgba(255, 255, 255, .6);
  }
}

/* No backdrop-filter: nearly opaque surfaces keep text readable over the mesh. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="glass"] {
    --ui-surface: rgba(255, 255, 255, .92);
  }
}

/* Asked for less transparency or more contrast: solid surfaces, darker edges, no mesh. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  [data-theme="glass"] {
    --ui-surface: #fff;
    --ui-surface-strong: #fff;
    --ui-text-muted: #334155;
    --ui-border: #64748b;
    --ui-shadow-raised: 0 8px 32px rgba(15, 23, 42, .1), inset 0 0 0 1px #64748b;
    --ui-shadow-raised-sm: inset 0 0 0 1px #64748b;
    --ui-shadow-inset: inset 0 0 0 1px #334155;
    --ui-swatch-outline: #334155;
    --ui-blur: none;
    --ui-bg-mesh: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="glass"] {
    --ui-transition: none;
    --ui-lift: none;
  }
}

/* ---------- Page-level rules (the <html> theme only, never a nested preview) ---------- */

/* The mesh sits on a fixed layer: background-attachment: fixed breaks on iOS. */
html[data-theme="glass"] body::before {
  background: var(--ui-bg-mesh), var(--ui-bg);
  content: "";
  height: 100vh;
  height: 100lvh;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -1;
}

/* Sticky frosted header on public pages; anchors and focused fields stop below it. */
html[data-theme="glass"] {
  scroll-padding-top: 5rem;
}

html[data-theme="glass"] body:not(.admin) .site-header {
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* Windows high contrast drops shadows and translucency: real borders keep the shapes. */
@media (forced-colors: active) {
  html[data-theme="glass"] :is(.neu-card, .neu-btn, .site-header, .error-summary) {
    border: 1px solid CanvasText;
  }

  html[data-theme="glass"] :is(.neu-input, .neu-choice) {
    border-color: CanvasText;
  }

  html[data-theme="glass"] .btn-check:checked + .neu-choice {
    border-color: Highlight;
  }
}