/* ═══════════════════════════════════════════════════════════════
   Dew & Scrub — Glassmorphism Design System
   ═══════════════════════════════════════════════════════════════
   Single source of truth for the platform's frosted-glass aesthetic.

   Why plain CSS (not @apply): this project ships Tailwind via the
   CDN runtime only — there is no build step to compile @apply.
   Plain CSS + custom properties is the only correct way to expose
   one global knob for blur/opacity tuning across every template.

   TO RETUNE THE FROST PLATFORM-WIDE:
     1. Edit --glass-blur / --glass-bg in :root and .dark below.
     2. Everything else inherits automatically.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Light mode: legible frosted white over a bright hero image. */
  --glass-bg: rgba(255, 255, 255, 0.70);
  --glass-border: rgba(255, 255, 255, 0.50);
  --glass-blur: 12px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

  /* Contrast overlay tint layered between the fixed backdrop image
     and the content. Subtle in light mode so the hero still reads. */
  --overlay-tint: rgba(255, 255, 255, 0.35);
}

.dark {
  /* Dark mode: spec-faithful frosted glass (bg-white/10) over a
     darker overlay (bg-black/40). */
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.20);
  --glass-blur: 12px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --overlay-tint: rgba(0, 0, 0, 0.60);
}

/* ── Core Frosted Container ──────────────────────────────────────
   Use on cards, sidebars, modals, headers, footers — anything that
   holds content over the fixed background. */
.glass-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 1.5rem; /* ≈ Tailwind rounded-[24px], matches existing cards */
}

/* ── Strong Variant (Adaptive Contrast) ──────────────────────────
   For high-noise / bright background zones where the standard frost
   would lose legibility. Opaque enough to anchor text without
   resorting to pure black/white. */
.glass-card-strong {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.06);
}
.dark .glass-card-strong {
  background: rgba(23, 23, 23, 0.65); /* ≈ Tailwind bg-neutral-900/60 */
  border-color: rgba(255, 255, 255, 0.12);
}

/* ── Fixed Backdrop Layers ───────────────────────────────────────
   Applied only to the two full-viewport fixed background layers.
   `contain: strict` + `translateZ(0)` isolate the static
   backdrop-filter from scroll paint cycles, preventing the layout
   thrash called out in the performance directive. */
.glass-bg-fixed,
.glass-overlay-fixed {
  contain: strict;
  transform: translateZ(0);
}

/* ── Heading Readability Lift ────────────────────────────────────
   drop-shadow-sm directive applied to brand headings that sit over
   the vibrant background. Subtle in light, stronger in dark. */
.glass-heading {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
}
.dark .glass-heading {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* ── Touch-Target Floor (mobile ergonomics) ──────────────────────
   Guarantee a minimum 44px hit area on interactive elements flagged
   with .touch-target, without disturbing existing icon sizing. */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* ── Accessibility: honor reduced-motion ─────────────────────────
   Blur is the most expensive part of the glass effect; for users
   who opt out of motion we drop it and rely on the semi-opaque
   background alone, preserving contrast at lower render cost. */
@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .glass-card-strong {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Accessibility & Contrast Overrides (WCAG AA Compliance)
   ═══════════════════════════════════════════════════════════════ */

/* Light Mode Overrides (Dark Text on Light/Frosted Background) */
.text-stone-400 { color: #57534e !important; }
.text-stone-500 { color: #44403c !important; }
.text-stone-600 { color: #292524 !important; }
.text-stone-700 { color: #1c1917 !important; }
.text-stone-800 { color: #0c0a09 !important; }
.text-stone-900 { color: #000000 !important; }

.text-neutral-400 { color: #525252 !important; }
.text-neutral-500 { color: #404040 !important; }
.text-neutral-600 { color: #262626 !important; }
.text-neutral-700 { color: #171717 !important; }
.text-neutral-800 { color: #0a0a0a !important; }
.text-neutral-900 { color: #000000 !important; }

.text-gray-400 { color: #4b5563 !important; }
.text-gray-500 { color: #374151 !important; }
.text-gray-600 { color: #1f2937 !important; }
.text-gray-700 { color: #111827 !important; }
.text-gray-800 { color: #030712 !important; }
.text-gray-900 { color: #000000 !important; }

::placeholder {
  color: #57534e !important;
  opacity: 1 !important; /* Firefox override */
}

/* Dark Mode Overrides (Light Text on Dark/Frosted Background) */
.dark .text-stone-300, .dark .dark\:text-stone-300 { color: #f5f5f4 !important; }
.dark .text-stone-400, .dark .dark\:text-stone-400 { color: #e7e5e4 !important; }
.dark .text-stone-500, .dark .dark\:text-stone-500 { color: #d6d3d1 !important; }
.dark .text-stone-600, .dark .dark\:text-stone-600 { color: #a8a29e !important; }

.dark .text-neutral-300, .dark .dark\:text-neutral-300 { color: #fafafa !important; }
.dark .text-neutral-400, .dark .dark\:text-neutral-400 { color: #f5f5f5 !important; }
.dark .text-neutral-500, .dark .dark\:text-neutral-500 { color: #e5e5e5 !important; }
.dark .text-neutral-600, .dark .dark\:text-neutral-600 { color: #d4d4d4 !important; }

.dark .text-gray-300, .dark .dark\:text-gray-300 { color: #fafafa !important; }
.dark .text-gray-400, .dark .dark\:text-gray-400 { color: #f5f5f5 !important; }
.dark .text-gray-500, .dark .dark\:text-gray-500 { color: #e5e5e5 !important; }
.dark .text-gray-600, .dark .dark\:text-gray-600 { color: #d4d4d4 !important; }

.dark .text-stone-100, .dark .dark\:text-stone-100,
.dark .text-neutral-100, .dark .dark\:text-neutral-100,
.dark .text-gray-100, .dark .dark\:text-gray-100 {
  color: #ffffff !important;
}

.dark .text-stone-200, .dark .dark\:text-stone-200,
.dark .text-neutral-200, .dark .dark\:text-neutral-200,
.dark .text-gray-200, .dark .dark\:text-gray-200 {
  color: #f8f8f8 !important;
}

/* Dark Mode Placeholders */
.dark ::placeholder,
.dark .dark\:placeholder-stone-600::placeholder,
.dark .dark\:placeholder-stone-500::placeholder {
  color: #a8a29e !important;
  opacity: 1 !important;
}