/* Site styles (loaded after Tailwind output assets/styles.css) */
/* ===== Tweakable CSS variables ===== */
:root {
  /* Default accent: Violet */
  --accent-50:  245 243 255;
  --accent-100: 237 233 254;
  --accent-200: 221 214 254;
  --accent-300: 196 181 253;
  --accent-400: 167 139 250;
  --accent-500: 139 92 246;
  --accent-600: 124 58 237;
  --accent-700: 109 40 217;
  --accent-800: 91 33 182;
  --accent-900: 76 29 149;

  /* Density rhythm */
  --density-section-y: 6rem;        /* py-24 lg:py-32 baseline */
  --density-section-y-lg: 8rem;
  --density-card-pad: 1.75rem;      /* p-7 */
  --density-h1-scale: 1;
  --density-h2-scale: 1;

  /* Surface treatment */
  --surface-radius-card: 1rem;      /* rounded-2xl */
  --surface-radius-btn: 0.5rem;
  --surface-border-color: 226 232 240; /* ink-200 */
  --surface-border-width: 1px;
  --surface-shadow-card: 0 0 transparent;
  --surface-shadow-hover: 0 30px 60px -20px rgba(124,58,237,0.25);
  --surface-card-bg: 255 255 255;
  --surface-glass-blur: 0px;
}
html.dark {
  --surface-border-color: 30 41 59; /* ink-800 */
  --surface-card-bg: 15 23 42;      /* ink-900 */
}

/* === Accent variants === */
body[data-accent="cyan"] {
  --accent-50:  236 254 255;
  --accent-100: 207 250 254;
  --accent-200: 165 243 252;
  --accent-300: 103 232 249;
  --accent-400: 34 211 238;
  --accent-500: 6 182 212;
  --accent-600: 8 145 178;
  --accent-700: 14 116 144;
  --accent-800: 21 94 117;
  --accent-900: 22 78 99;
}
/* Apply density */
section.py-24, section[id].py-24 { padding-top: var(--density-section-y) !important; padding-bottom: var(--density-section-y) !important; }
@media (min-width: 1024px) {
  section.lg\:py-32, section[id].lg\:py-32 { padding-top: var(--density-section-y-lg) !important; padding-bottom: var(--density-section-y-lg) !important; }
}
h1 { font-size: calc(var(--density-h1-scale, 1) * 1em); }
h2 { font-size: calc(var(--density-h2-scale, 1) * 1em); }

/* === Surface variants === */
/* Glass (default-ish but more pronounced): translucent cards with blur */
body[data-surface="glass"] {
  --surface-radius-card: 1.25rem;
  --surface-radius-btn: 0.625rem;
  --surface-border-width: 1px;
  --surface-shadow-card: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 32px rgba(15,23,42,0.06);
  --surface-glass-blur: 14px;
}
body[data-surface="glass"] article.card-hover,
body[data-surface="glass"] aside .rounded-2xl,
body[data-surface="glass"] form.rounded-2xl,
body[data-surface="glass"] .rounded-2xl {
  backdrop-filter: blur(var(--surface-glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--surface-glass-blur)) saturate(160%);
  background-color: rgba(var(--surface-card-bg) / 0.65) !important;
}

/* Apply surface to all cards */
.rounded-2xl {
  border-radius: var(--surface-radius-card) !important;
  border-width: var(--surface-border-width);
  box-shadow: var(--surface-shadow-card);
}
.rounded-xl {
  border-radius: calc(var(--surface-radius-card) * 0.75) !important;
}
.rounded-lg {
  border-radius: calc(var(--surface-radius-btn) * 1.25) !important;
}
.rounded-md {
  border-radius: var(--surface-radius-btn) !important;
}
/* Override eyebrow + pills + dots — keep them pill-shaped */
.rounded-full, .eyebrow, .live-dot {
  border-radius: 999px !important;
}
/* Buttons follow btn radius */
button.rounded-lg, a.rounded-lg, [type="submit"].rounded-lg {
  border-radius: var(--surface-radius-btn) !important;
}

.card-hover:hover {
  box-shadow: var(--surface-shadow-hover) !important;
}

html { scroll-padding-top: 5rem; }
html { font-feature-settings: 'cv02','cv03','cv04','cv11'; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* Subtle grid background */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.dark .grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
}

/* Radial fade mask for grid bg */
.mask-radial {
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
}

/* Gradient text — uses accent vars */
.text-gradient {
  background: linear-gradient(135deg, #0F172A 0%, rgb(var(--accent-900)) 50%, rgb(var(--accent-600)) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.dark .text-gradient {
  background: linear-gradient(135deg, #F8FAFC 0%, rgb(var(--accent-300)) 50%, rgb(var(--accent-400)) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Mesh gradient — uses accent vars */
.mesh {
  background:
    radial-gradient(at 20% 20%, rgb(var(--accent-500) / 0.18) 0px, transparent 50%),
    radial-gradient(at 80% 0%,  rgb(var(--accent-600) / 0.12) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgb(var(--accent-400) / 0.10) 0px, transparent 50%);
}
.dark .mesh {
  background:
    radial-gradient(at 20% 20%, rgb(var(--accent-500) / 0.28) 0px, transparent 50%),
    radial-gradient(at 80% 0%,  rgb(var(--accent-600) / 0.20) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgb(var(--accent-900) / 0.20)  0px, transparent 50%);
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Glass header */
.glass {
  background-color: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.dark .glass {
  background-color: rgba(10,15,28,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Product card hover */
.card-hover {
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.3s;
}
.card-hover:hover {
  transform: translateY(-6px);
}

/* Custom focus */
*:focus-visible {
  outline: 2px solid rgb(var(--accent-500));
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hide scrollbar in mock */
.mock-scroll::-webkit-scrollbar { display: none; }

/* Floating shape blur */
.blob {
  filter: blur(60px);
  opacity: 0.55;
}

/* Section heading hairline */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgb(var(--accent-500) / 0.25);
  background: rgb(var(--accent-500) / 0.06);
  color: rgb(var(--accent-700));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.dark .eyebrow {
  background: rgb(var(--accent-500) / 0.1);
  color: rgb(var(--accent-300));
  border-color: rgb(var(--accent-500) / 0.3);
}

/* Animated dot */
.live-dot {
  width: 8px; height: 8px; border-radius: 999px; background: #10B981;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.45);
  animation: ring 2s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ring {
  0%   { box-shadow: 0 0 0 0   rgba(16,185,129,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0);    }
  100% { box-shadow: 0 0 0 0   rgba(16,185,129,0);    }
}

/* Smooth transition for theme switch */
body, body *:not(.live-dot):not([class*="animate-"]) {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Select arrow */
select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%2364748B%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%208%2010%2012%2014%208%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  appearance: none;
  -webkit-appearance: none;
}

/* Prose styling for legal pages */
.legal-prose h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 1rem; color: #0F172A; }
.dark .legal-prose h2 { color: #F8FAFC; }
.legal-prose h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.125rem; margin-top: 1.75rem; margin-bottom: 0.5rem; color: #0F172A; }
.dark .legal-prose h3 { color: #F8FAFC; }
.legal-prose p { margin-bottom: 1rem; line-height: 1.75; color: #334155; }
.dark .legal-prose p { color: #CBD5E1; }
.legal-prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; color: #334155; }
.dark .legal-prose ul { color: #CBD5E1; }
.legal-prose li { margin-bottom: 0.5rem; line-height: 1.7; }
.legal-prose a { color: rgb(var(--accent-700)); text-decoration: underline; text-underline-offset: 3px; }
.dark .legal-prose a { color: rgb(var(--accent-400)); }
.legal-prose strong { color: #0F172A; font-weight: 600; }
.dark .legal-prose strong { color: #F8FAFC; }