/* ─── RESET & GLOBAL ─────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  scroll-behavior: smooth;
  font-family:
    "Plus Jakarta Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.font-display {
  font-family: "Fraunces", "Times New Roman", serif;
}

/* ─── DESIGN TOKENS (LIGHT) ─────────────────────────────────────────────── */

:root {
  --bg-primary: #f5f2eb;
  --bg-surface: #ffffff;
  --bg-subtle: #ece8df;
  --bg-muted: #e3decf;
  --bg-brand-subtle: #d8f3dc;

  --text-primary: #131310;
  --text-secondary: #4a4a52;
  --text-muted: #86868f;
  --text-on-brand: #ffffff;
  --text-inverse: #f5f2eb;

  --brand-primary: #1b4332;
  --brand-hover: #143326;
  --brand-mid: #2d6a4f;
  --brand-light: #52b788;
  --brand-subtle: #d8f3dc;

  --accent-primary: #c8993e;
  --accent-light: #f5e8c4;

  --border-default: #d3cebd;
  --border-subtle: #ece8df;
  --border-strong: #a8a395;

  --scrollbar-track: color-mix(in srgb, var(--bg-subtle) 88%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--brand-primary) 58%, var(--bg-primary));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--brand-primary) 74%, var(--bg-primary));

  --live: #22c55e;
  --breaking: #dc2626;
}

/* ─── DESIGN TOKENS (DARK) ──────────────────────────────────────────────── */

:root[data-theme="dark"],
body.theme-dark {
  --bg-primary: #0c0c0f;
  --bg-surface: #13131a;
  --bg-subtle: #1a1a22;
  --bg-muted: #22222c;
  --bg-brand-subtle: #14261d;

  --text-primary: #edebe3;
  --text-secondary: #a8a7b0;
  --text-muted: #5e5e6a;
  --text-on-brand: #0c0c0f;
  --text-inverse: #0c0c0f;

  --brand-primary: #258f5e;
  --brand-hover: #74c69d;
  --brand-mid: #74c69d;
  --brand-light: #95d5b2;
  --brand-subtle: #14261d;

  --accent-primary: #e9c46a;
  --accent-light: #2a2210;

  --border-default: #272730;
  --border-subtle: #1a1a22;
  --border-strong: #363644;

  --scrollbar-track: color-mix(in srgb, var(--bg-subtle) 92%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--brand-primary) 68%, var(--bg-primary));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--brand-hover) 82%, var(--bg-primary));

  --live: #22c55e;
  --breaking: #dc2626;
}

/* ─── ANIMATIONS & UTILITIES ───────────────────────────────────────────── */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes floatCard {

  0%,
  100% {
    transform: translateY(0) rotate(2deg);
  }

  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.4);
  }
}

.anim-1 {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.anim-2 {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

.anim-3 {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.anim-4 {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.44s both;
}

.anim-5 {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.58s both;
}

.anim-card {
  animation: floatCard 5s ease-in-out infinite;
}

.card-lift {
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease;
  cursor: default;
}

.card-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.13) !important;
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  border-radius:99px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.18s;
  cursor: pointer;
}

.nav-link:hover {
  color: var(--brand-primary);
}

.nav-link.is-active {
  color: var(--brand-primary);
}

.ds-swatch {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-default);
  flex-shrink: 0;
}

.noise-bg {
  position: relative;
}

.noise-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.5;
  pointer-events: none;
}

html[data-theme="dark"] .noise-bg::before {
  opacity: 0.3;
}

html {
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.grecaptcha-badge {
  display: none;
}