/* ==========================================================================
   SomDNS — design tokens & base styles
   Everything that flips between light and dark lives here as a CSS variable
   so Tailwind utilities (bg-page, text-ink, border-line, shadow-som …) stay
   theme-agnostic. Brand colours that never change are literals in
   assets/js/tailwind.config.js.
   ========================================================================== */

:root {
  /* surfaces */
  --som-bg: #f8fafc;
  --som-surface: #ffffff;
  --som-surface-alt: #ffffff;
  --som-fill: #eef2f7; /* neutral button / kbd fill */

  /* type */
  --som-text: #111827;
  --som-muted: #64748b;

  /* lines */
  --som-border: #e5e7eb;

  /* elevation */
  --som-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --som-shadow-lg: 0 20px 50px rgba(16, 24, 40, 0.12);

  /* effects */
  --som-glow: rgba(0, 87, 255, 0.1);
  --som-nav: rgba(248, 250, 252, 0.85);
  --som-skeleton: #eef2f7;
  --som-toast-bg: #0f172a;
}

.dark {
  --som-bg: #111827;
  --som-surface: #1b2536;
  --som-surface-alt: #151e2d;
  --som-fill: #293445;

  --som-text: #f1f5f9;
  --som-muted: #94a3b8;

  --som-border: #293445;

  --som-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --som-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);

  --som-glow: rgba(0, 87, 255, 0.18);
  --som-nav: rgba(17, 24, 39, 0.85);
  --som-skeleton: #222f42;
  --som-toast-bg: #1b2536;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--som-bg);
  color: var(--som-text);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: #0057ff;
  color: #fff;
}

/* Utility classes used where a Tailwind arbitrary value would be unreadable
   or where the value depends on a theme variable. ------------------------- */

.som-nav {
  background: var(--som-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.som-hero-glow {
  background: radial-gradient(ellipse 80% 50% at 50% -8%, var(--som-glow), transparent);
}

.som-search-glow {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, var(--som-glow), transparent);
}

.som-gradient {
  background: linear-gradient(120deg, #0057ff, #00c2ff);
}

.som-gradient-navy {
  background: linear-gradient(120deg, #0b1e4d, #0057ff);
}

.som-gradient-text {
  background: linear-gradient(120deg, #0057ff, #00c2ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.som-bar {
  background: linear-gradient(180deg, #00c2ff, #0057ff);
}

.som-marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Skeleton shimmer — needs both theme colours in one gradient. */
.som-skeleton {
  background: linear-gradient(
    90deg,
    var(--som-border) 25%,
    var(--som-skeleton) 37%,
    var(--som-border) 63%
  );
  background-size: 200% 100%;
  animation: somSk 1.3s infinite;
}

@keyframes somSk {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.som-toast {
  background: var(--som-toast-bg);
}

/* Inputs inherit the page font rather than the UA default. */
input,
select,
button,
textarea {
  font-family: inherit;
}

input:focus-visible,
select:focus-visible {
  outline: none;
}

.som-field:focus-within,
.som-input:focus {
  border-color: #0057ff;
  box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.12);
}

/* Card hover lift (products, plans). */
.som-lift {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.som-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--som-shadow-lg);
}

/* Lucide icons render as <svg> — keep them from collapsing before hydration. */
[data-lucide] {
  width: 1em;
  height: 1em;
}

/* Hide scrollbar on the mobile nav strip but keep it scrollable. */
.som-scroll-x {
  overflow-x: auto;
  scrollbar-width: none;
}

.som-scroll-x::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}