/* NumLink, Vault & Signal design system
   Fraunces (display) + Hanken Grotesk (UI) + JetBrains Mono (numbers/codes) */

:root,
[data-theme="light"] {
  --color-bg: 250 246 236;
  --color-surface: 255 255 255;
  --color-surface-2: 242 236 220;
  --color-ink: 23 20 15;
  --color-muted: 110 102 86;
  --color-accent: 30 122 92;
  --color-accent-strong: 23 95 72;
  --color-brass: 148 111 35;
  --color-danger: 176 61 46;
  --color-line: 23 20 15;
  --shadow-color: 23 20 15;
  --grain-opacity: 0.025;
  --mesh-opacity: 0.10;
}

[data-theme="dark"] {
  --color-bg: 12 17 16;
  --color-surface: 19 27 24;
  --color-surface-2: 24 35 31;
  --color-ink: 243 240 231;
  --color-muted: 154 166 157;
  --color-accent: 58 178 137;
  --color-accent-strong: 76 214 163;
  --color-brass: 205 168 103;
  --color-danger: 227 116 102;
  --color-line: 243 240 231;
  --shadow-color: 0 0 0;
  --grain-opacity: 0.05;
  --mesh-opacity: 0.16;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: 12 17 16;
    --color-surface: 19 27 24;
    --color-surface-2: 24 35 31;
    --color-ink: 243 240 231;
    --color-muted: 154 166 157;
    --color-accent: 58 178 137;
    --color-accent-strong: 76 214 163;
    --color-brass: 205 168 103;
    --color-danger: 227 116 102;
    --color-line: 243 240 231;
    --shadow-color: 0 0 0;
    --grain-opacity: 0.05;
    --mesh-opacity: 0.16;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  background: rgb(var(--color-bg));
  color: rgb(var(--color-ink));
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  transition: background-color .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgb(var(--color-accent) / 0.25);
  color: rgb(var(--color-ink));
}

.font-display { font-family: "Fraunces", "Iowan Old Style", serif; font-optical-sizing: auto; }
.font-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ---------- Texture: ledger dot-grid + mesh glow ---------- */
.ledger-texture {
  position: relative;
  isolation: isolate;
}
.ledger-texture::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgb(var(--color-ink) / 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: var(--grain-opacity);
  pointer-events: none;
  z-index: 0;
}
.mesh-glow {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mesh-glow::before,
.mesh-glow::after {
  content: "";
  position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 999px;
  filter: blur(90px);
  opacity: var(--mesh-opacity);
}
.mesh-glow::before {
  background: rgb(var(--color-accent));
  top: -18vw; right: -12vw;
}
.mesh-glow::after {
  background: rgb(var(--color-brass));
  bottom: -22vw; left: -14vw;
  width: 42vw; height: 42vw;
}

/* ---------- Nav ---------- */
.navbar {
  border-bottom: 1px solid rgb(var(--color-line) / 0.10);
  background: rgb(var(--color-bg) / 0.82);
  backdrop-filter: blur(14px);
}
.nav-link {
  position: relative;
  color: rgb(var(--color-muted));
  font-weight: 600;
  font-size: .875rem;
  transition: color .2s ease;
}
.nav-link:hover { color: rgb(var(--color-ink)); }
.nav-link.is-active { color: rgb(var(--color-ink)); }
.nav-link.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -18px;
  height: 2px;
  background: rgb(var(--color-accent));
  border-radius: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: .9375rem;
  padding: .75rem 1.5rem;
  border-radius: .6rem;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: rgb(var(--color-accent));
  color: rgb(var(--color-bg));
  box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 10px 24px -12px rgb(var(--color-accent) / .55);
}
.btn-primary:hover { background: rgb(var(--color-accent-strong)); box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 14px 28px -12px rgb(var(--color-accent) / .65); }
.btn-secondary {
  background: transparent;
  color: rgb(var(--color-ink));
  border: 1.5px solid rgb(var(--color-line) / .22);
}
.btn-secondary:hover { border-color: rgb(var(--color-accent) / .6); color: rgb(var(--color-accent)); }
.btn-ghost {
  background: transparent;
  color: rgb(var(--color-muted));
}
.btn-ghost:hover { color: rgb(var(--color-ink)); }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; border-radius: .75rem; }
.btn-block { width: 100%; }

/* ---------- Cards & surfaces ---------- */
.card {
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-line) / .10);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(var(--shadow-color) / .06), 0 18px 40px -24px rgb(var(--shadow-color) / .35);
}
.card-2 { background: rgb(var(--color-surface-2)); }

/* ---------- Seal badge (verified / trust marker) ---------- */
.seal {
  --seal-size: 3.5rem;
  width: var(--seal-size); height: var(--seal-size);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  margin-left: auto; margin-right: auto;
  background: radial-gradient(circle at 32% 28%, rgb(var(--color-brass) / .35), rgb(var(--color-brass) / .08) 70%);
  border: 1.5px solid rgb(var(--color-brass) / .55);
  color: rgb(var(--color-brass));
  position: relative;
}
.seal::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 999px;
  border: 1px dashed rgb(var(--color-brass) / .4);
}

/* ---------- Ledger divider ---------- */
.ledger-divider {
  display: flex; align-items: center; gap: .875rem;
  color: rgb(var(--color-muted));
}
.ledger-divider::before, .ledger-divider::after {
  content: ""; flex: 1; height: 1px;
  background: rgb(var(--color-line) / .16);
}

/* ---------- Inputs ---------- */
.field-label {
  display: block; font-size: .8125rem; font-weight: 700;
  color: rgb(var(--color-muted)); margin-bottom: .4rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.input {
  width: 100%;
  background: rgb(var(--color-bg));
  border: 1.5px solid rgb(var(--color-line) / .16);
  border-radius: .65rem;
  padding: .8rem 1rem;
  color: rgb(var(--color-ink));
  font-size: .9375rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input:focus {
  outline: none;
  border-color: rgb(var(--color-accent) / .7);
  box-shadow: 0 0 0 4px rgb(var(--color-accent) / .14);
}
.input::placeholder { color: rgb(var(--color-muted) / .6); }
select.input { appearance: none; }

/* ---------- Phone field (country picker + number) ---------- */
.phone-field {
  display: flex; align-items: stretch;
  border: 1.5px solid rgb(var(--color-line) / .16);
  border-radius: .65rem;
  background: rgb(var(--color-bg));
  transition: border-color .18s ease, box-shadow .18s ease;
  position: relative;
}
.phone-field:focus-within {
  border-color: rgb(var(--color-accent) / .7);
  box-shadow: 0 0 0 4px rgb(var(--color-accent) / .14);
}
.phone-country-btn {
  display: flex; align-items: center; gap: .4rem;
  padding: 0 .75rem;
  border-right: 1.5px solid rgb(var(--color-line) / .14);
  color: rgb(var(--color-ink));
  flex-shrink: 0;
  transition: color .15s ease;
}
.phone-country-btn:hover { color: rgb(var(--color-accent)); }
.phone-flag { font-size: 1.05rem; line-height: 1; }
.phone-number-input {
  flex: 1; min-width: 0;
  background: transparent;
  border: none;
  padding: .8rem 1rem;
  color: rgb(var(--color-ink));
  font-size: .9375rem;
  border-radius: 0 .65rem .65rem 0;
}
.phone-number-input::placeholder { color: rgb(var(--color-muted) / .6); }
.phone-number-input:focus { outline: none; }
.country-dropdown {
  position: absolute; top: calc(100% + .5rem); left: 0;
  width: 17.5rem; max-height: 15.5rem; overflow-y: auto;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-line) / .14);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgb(var(--shadow-color) / .08), 0 24px 48px -20px rgb(var(--shadow-color) / .5);
  padding: .4rem;
  z-index: 40;
  display: none;
}
.country-dropdown.is-open { display: block; }
.country-option {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .6rem;
  border-radius: .5rem;
  font-size: .8125rem;
  cursor: pointer;
  transition: background-color .15s ease;
}
.country-option:hover { background: rgb(var(--color-accent) / .09); }
.country-option .co-name { flex: 1; color: rgb(var(--color-ink)); }
.country-option .co-code { color: rgb(var(--color-muted)); }

/* ---------- OTP boxes ---------- */
.otp-box {
  width: 3rem; height: 3.5rem;
  text-align: center;
  font-size: 1.5rem;
  border-radius: .65rem;
}
@media (max-width: 420px) {
  .otp-box { width: 2.5rem; height: 3rem; font-size: 1.25rem; }
}

/* ---------- Masked history rows ---------- */
.masked-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgb(var(--color-line) / .12);
  border-radius: .85rem;
  transition: border-color .18s ease, background-color .18s ease;
}
.masked-row:hover { border-color: rgb(var(--color-accent) / .45); background: rgb(var(--color-accent) / .04); }
.masked-row:has(input:checked) { border-color: rgb(var(--color-accent) / .7); background: rgb(var(--color-accent) / .08); }

/* ---------- Pill radios (checked state) ---------- */
.pill-muted:has(input:checked) { background: rgb(var(--color-accent) / .16); color: rgb(var(--color-accent)); }

/* ---------- Pills / tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 700;
  padding: .3rem .65rem;
  border-radius: 999px;
}
.pill-accent { background: rgb(var(--color-accent) / .14); color: rgb(var(--color-accent)); }
.pill-brass { background: rgb(var(--color-brass) / .14); color: rgb(var(--color-brass)); }
.pill-danger { background: rgb(var(--color-danger) / .14); color: rgb(var(--color-danger)); }
.pill-muted { background: rgb(var(--color-line) / .08); color: rgb(var(--color-muted)); }

/* ---------- Signal waveform (SVG stroke animation) ---------- */
.signal-path {
  fill: none;
  stroke: rgb(var(--color-accent));
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  animation: signal-flow 5s linear infinite;
  opacity: .55;
}
.signal-path.is-broken {
  stroke: rgb(var(--color-danger));
  stroke-dasharray: 3 7;
  opacity: .5;
}
@keyframes signal-flow {
  to { stroke-dashoffset: -160; }
}

/* ---------- Reveal / stagger animation ----------
   Opacity-only on purpose: a transform (even translateY(0) at rest) creates a
   new stacking context for as long as it's set, which can trap an
   absolutely-positioned child (e.g. the country dropdown) below later
   sibling sections. Fading only avoids that risk entirely, at any point in
   the animation, with no timing dependency. */
.reveal {
  opacity: 0;
  animation: reveal-up .8s ease-out forwards;
}
@keyframes reveal-up {
  to { opacity: 1; }
}

/* ---------- Accordion ---------- */
.accordion-item { border-bottom: 1px solid rgb(var(--color-line) / .12); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; text-align: left; cursor: pointer;
  font-family: "Fraunces", serif; font-size: 1.0625rem; font-weight: 600;
}
.accordion-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.accordion-panel > div { overflow: hidden; }
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-item.is-open .accordion-chevron { transform: rotate(180deg); }
.accordion-chevron { transition: transform .3s ease; color: rgb(var(--color-muted)); flex-shrink: 0; }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  width: 2.65rem; height: 2.65rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: .65rem;
  border: 1.5px solid rgb(var(--color-line) / .16);
  color: rgb(var(--color-muted));
  transition: color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { color: rgb(var(--color-ink)); border-color: rgb(var(--color-accent) / .5); }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: none; }

/* ---------- Mobile drawer ---------- */
#mobile-drawer { transition: transform .3s cubic-bezier(.16,1,.3,1); }

/* ---------- Misc ---------- */
.text-muted-c { color: rgb(var(--color-muted)); }
.border-line-c { border-color: rgb(var(--color-line) / .12); }
.bg-noise-card {
  background: rgb(var(--color-surface));
}