/* 21 Cards — light hotel-like marketing theme (well-known inspired)
   Overrides dark Stitch tokens toward airy stone / soft sky washes.
   Pair with remapped Tailwind color map in each HTML page. */

:root {
  --wk-stone: #fafaf9;
  --wk-white: #ffffff;
  --wk-slate: #f8fafc;
  --wk-sky-wash: #eff6ff;
  --wk-sky-soft: #dbeafe;
  --wk-blue: #3b82f6;
  --wk-blue-mid: #60a5fa;
  --wk-blue-soft: #93c5fd;
  --wk-blue-deep: #1e40af;
  --wk-ink: #0f172a;
  --wk-ink-muted: #1e293b;
  --wk-muted: #64748b;
  --wk-telegram: #38bdf8;
  --wk-border: rgba(15, 23, 42, 0.08);
  --wk-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --wk-shadow-soft: 0 4px 16px rgba(15, 23, 42, 0.06);
}

html {
  scroll-behavior: smooth;
}

html.dark {
  color-scheme: light;
}

body {
  background-color: var(--wk-stone) !important;
  color: var(--wk-ink-muted);
}

/* Sticky navbar — translucent at top, solid light when scrolled */
#mainNavbar {
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  background-color: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none !important;
}

#mainNavbar.at-top {
  background-color: rgba(255, 255, 255, 0.45) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  box-shadow: none !important;
}

#mainNavbar.scrolled {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid var(--wk-border);
  box-shadow: var(--wk-shadow-soft) !important;
}

#mainNavbar .nav-link {
  transition: color 0.25s ease, background-color 0.25s ease;
}

#mainNavbar.scrolled .nav-link,
#mainNavbar.scrolled [data-path] {
  color: var(--wk-ink-muted);
}

/* Softer section rhythm — stone / white / soft sky */
main > section:nth-child(odd) {
  background-color: var(--wk-white);
}

main > section:nth-child(even) {
  background-color: var(--wk-stone);
}

main > section.bg-surface-obsidian,
main > section.bg-surface,
main > section.bg-background,
main > section.bg-surface-midnight,
section.bg-surface-obsidian,
section.bg-surface-midnight,
.bg-surface-obsidian {
  background-color: var(--wk-slate) !important;
}

.bg-surface-midnight {
  background-color: var(--wk-white) !important;
}

.bg-surface-card-base,
.bg-surface-container,
.bg-surface-container-low,
.bg-surface-container-high,
.bg-surface-container-highest,
.bg-surface-container-lowest {
  background-color: var(--wk-white) !important;
  border: 1px solid var(--wk-border);
  box-shadow: var(--wk-shadow-soft);
}

/* Soft sky wash accents instead of neon glows */
.bg-american-blue-deep\/15,
.bg-american-blue-deep\/20,
[class*="bg-american-blue-deep/"] {
  background-color: rgba(59, 130, 246, 0.12) !important;
}

/* Soften glow shadows */
[class*="shadow-[0_0_"],
[class*="shadow-[0_0"] {
  box-shadow: var(--wk-shadow) !important;
}

/* CTAs on blue / telegram gradients need light text */
a[href*="t.me"],
a[class*="from-telegram-cyan"],
a[class*="from-american-blue"],
a.bg-primary-container,
a.bg-american-blue-deep,
.bg-primary-container.text-text-primary,
.bg-american-blue-deep.text-text-primary,
[class*="from-telegram-cyan"].text-text-primary,
[class*="from-american-blue"].text-text-primary,
header a[href*="t.me"] span {
  color: #ffffff !important;
}

/* Logo mark on blue gradient */
header .bg-gradient-to-br.from-american-blue-deep span,
header [class*="from-american-blue-deep"] > span {
  color: #ffffff !important;
}

/* Footer stays readable on light */
footer {
  background-color: var(--wk-slate) !important;
  border-top: 1px solid var(--wk-border);
  box-shadow: none !important;
  color: var(--wk-muted);
}

footer .text-text-primary {
  color: var(--wk-ink) !important;
}

footer .bg-primary-container {
  color: #ffffff !important;
}

footer .bg-primary-container .text-text-primary,
footer .bg-primary-container {
  color: #ffffff !important;
}

/* Cards / panels: white with subtle border, less neon */
.rounded-xl.bg-surface-card-base,
.rounded-2xl.bg-surface-card-base,
.rounded.bg-surface-card-base {
  background: var(--wk-white) !important;
  border: 1px solid var(--wk-border);
  box-shadow: var(--wk-shadow-soft);
}

/* Soft sky band utility for heroes */
.wk-sky-wash {
  background: linear-gradient(180deg, var(--wk-sky-wash) 0%, var(--wk-white) 55%, var(--wk-stone) 100%);
}

/* First viewport / hero: soft sky wash instead of obsidian */
main > section:first-of-type,
main > div:first-of-type {
  background: linear-gradient(
    180deg,
    #eff6ff 0%,
    #ffffff 48%,
    #fafaf9 100%
  ) !important;
}

/* Airier section padding feel without changing layout structure */
main section {
  border-color: transparent;
}

/* Soften hardcoded dark header utility until nav.js runs */
#mainNavbar.bg-surface-midnight\/85,
header#mainNavbar {
  background-color: rgba(255, 255, 255, 0.45) !important;
}

/* Reduce harsh blur orbs intensity */
[class*="blur-[140px]"],
[class*="blur-3xl"] {
  opacity: 0.55;
}

/* Selection */
::selection {
  background: rgba(147, 197, 253, 0.55);
  color: var(--wk-ink);
}