/**
 * Grove Web Digital — Dark Hybrid premium layer
 * Atmosphere, glass, glow, hero mesh, card elevation, micro-motion.
 * Depends on tokens.css + theme.css (html.dark).
 */

html.dark {
  --gw-hero-grid: linear-gradient(
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  --gw-hero-mesh: radial-gradient(
      ellipse 70% 55% at 18% 12%,
      color-mix(in srgb, var(--color-chrome-0) 28%, transparent) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 50% at 88% 8%,
      color-mix(in srgb, var(--color-button-primary-bg) 12%, transparent) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 45% at 55% 95%,
      color-mix(in srgb, var(--color-chrome-0) 14%, transparent) 0%,
      transparent 55%
    );
}

/* Smooth theme transitions without layout shift */
html.dark body,
html.dark .gw-site-shell,
html.dark .gw-nav-wrap,
html.dark .gw-fcard,
html.dark .glass,
html.dark .glass-strong,
html.dark .gw-btn-primary,
html.dark .gw-btn-glass,
html.dark input,
html.dark textarea,
html.dark select {
  transition: var(--theme-transition);
}

/* —— Canvas —— */
html.dark body,
html.dark .gw-site-shell {
  background-color: var(--page-bg);
  color: var(--text-primary);
}

html.dark ::selection {
  background: color-mix(in srgb, var(--color-chrome-0) 35%, transparent);
  color: var(--color-dm-text);
}

/* —— Headings —— */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .gw-heading,
html.dark .text-heading {
  color: var(--text-heading);
}

html.dark .text-body,
html.dark .text-foreground,
html.dark p {
  color: var(--text-secondary);
}

html.dark .text-muted,
html.dark .text-secondary {
  color: var(--text-muted);
}

html.dark a:not(.gw-btn-primary):not(.gw-nav-premium__cta):not(.bg-gradient-primary) {
  transition: color 0.25s ease;
}

html.dark .gradient-text,
html.dark .font-display.gradient-text {
  color: var(--text-heading) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* —— Glass surfaces —— */
html.dark .glass,
html.dark .glass-strong {
  background: color-mix(in srgb, var(--color-dm-card) 78%, transparent);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

html.dark .glass-strong {
  background: color-mix(in srgb, var(--color-dm-elevated) 86%, transparent);
  border-color: color-mix(in srgb, #ffffff 12%, transparent);
}

/* —— Cards —— */
html.dark .gw-fcard {
  background: var(--card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease,
    border-color 0.28s ease;
}

html.dark .gw-fcard-wrap:hover .gw-fcard,
html.dark .gw-fcard:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color-chrome-0) 32%, transparent);
  box-shadow: var(--shadow-md), var(--glow-brand);
}

html.dark .gw-fcard-glow {
  background: var(--color-dm-glow) !important;
  opacity: 0.35 !important;
}

html.dark .gw-fcard-wrap:hover .gw-fcard-glow {
  opacity: 0.55 !important;
}

html.dark .gw-fcard-icon {
  background: color-mix(in srgb, var(--color-chrome-0) 35%, var(--color-dm-elevated)) !important;
  color: var(--color-dm-text) !important;
  box-shadow: 0 0 24px var(--color-dm-glow);
}

/* —— Buttons —— */
html.dark .gw-btn-primary,
html.dark .bg-gradient-primary:not(.opacity-20):not(.opacity-25):not(.opacity-30):not(.opacity-80):not(.opacity-90),
html.dark .gw-nav-cta,
html.dark .gw-nav-premium__cta {
  background: linear-gradient(
    135deg,
    var(--color-button-primary-bg) 0%,
    color-mix(in srgb, var(--color-button-primary-bg) 78%, var(--color-chrome-0)) 100%
  ) !important;
  color: var(--color-button-primary-text) !important;
  border: 1px solid color-mix(in srgb, var(--color-button-primary-bg) 50%, transparent);
  box-shadow:
    0 8px 28px color-mix(in srgb, var(--color-button-primary-bg) 28%, transparent),
    0 0 0 1px color-mix(in srgb, #ffffff 6%, transparent) inset;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

html.dark .gw-btn-primary:hover,
html.dark .gw-nav-cta:hover,
html.dark .gw-nav-premium__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 12px 36px color-mix(in srgb, var(--color-button-primary-bg) 38%, transparent),
    0 0 40px var(--color-dm-glow-green);
}

html.dark .gw-btn-glass,
html.dark .gw-btn-secondary {
  background: color-mix(in srgb, var(--color-dm-elevated) 55%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
  color: var(--color-dm-text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

html.dark .gw-btn-glass:hover,
html.dark .gw-btn-secondary:hover {
  background: color-mix(in srgb, var(--color-dm-elevated) 82%, transparent);
  border-color: color-mix(in srgb, var(--color-chrome-0) 40%, transparent);
  transform: translateY(-1px);
}

html.dark .gw-btn-primary:focus-visible,
html.dark .gw-btn-glass:focus-visible,
html.dark .gw-theme-toggle:focus-visible,
html.dark a:focus-visible,
html.dark button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* —— Hero atmosphere —— */
html.dark .mesh-bg {
  background-color: var(--page-bg);
  background-image: var(--gw-hero-mesh);
}

html.dark .bg-gradient-hero {
  background-color: var(--page-bg) !important;
  background-image: var(--gw-hero-mesh), var(--gw-hero-grid) !important;
  background-size: auto, 48px 48px !important;
}

html.dark .gw-hero-bg-photo {
  opacity: 0.12;
  mix-blend-mode: soft-light;
}

/* Noise overlay utility */
html.dark .gw-dark-noise::before,
html.dark .gw-hero-enterprise::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* —— Forms —— */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark textarea,
html.dark select {
  /* background-color only — shorthand would reset custom select carets to repeat */
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--input-placeholder);
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: color-mix(in srgb, var(--color-chrome-0) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-chrome-0) 22%, transparent);
}

/* —— Theme toggle polish —— */
html.dark .gw-theme-toggle {
  border-color: var(--border-color);
  background: color-mix(in srgb, var(--color-dm-elevated) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #ffffff 4%, transparent) inset;
}

html.dark .gw-theme-toggle:hover {
  box-shadow: var(--glow-brand);
  border-color: color-mix(in srgb, var(--color-chrome-0) 35%, transparent);
}

/* —— Scroll / reveal helpers (both themes) —— */
@media (prefers-reduced-motion: no-preference) {
  .gw-fade-up,
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .gw-fade-up.is-visible,
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.dark * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}