/* ===== Design tokens — shared by index.html and admin.html ===== */
:root {
  --bg: #EFF1F5;
  --surface: #FFFFFF;
  --surface-2: #F5F6F9;
  --ink: #1A1E27;
  --ink-hi: #262B37;
  --muted: #5B6472;
  --faint: #8A93A3;
  --accent: #A6752B;
  --accent-ink: #7C5A21;
  --accent-soft: #A6752B1A;
  --accent-shadow: rgba(124, 90, 33, 0.28);
  --line: #D9DDE4;
  --line-strong: #C3C9D3;
  --good: #3C7A5C;
  --danger: #B34848;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161C; --surface: #1C1F27; --surface-2: #20242E; --ink: #ECEEF3; --ink-hi: #F5F6F9;
    --muted: #9CA3B2; --faint: #6B7280;
    --accent: #D9A94E; --accent-ink: #E8C077; --accent-soft: #D9A94E22;
    --accent-shadow: rgba(217, 169, 78, 0.30);
    --line: #2B2F3A; --line-strong: #383D4A;
    --good: #5FAE87; --danger: #E08080;
  }
}
:root[data-theme="dark"] {
  --bg: #14161C; --surface: #1C1F27; --surface-2: #20242E; --ink: #ECEEF3; --ink-hi: #F5F6F9;
  --muted: #9CA3B2; --faint: #6B7280;
  --accent: #D9A94E; --accent-ink: #E8C077; --accent-soft: #D9A94E22;
  --accent-shadow: rgba(217, 169, 78, 0.30);
  --line: #2B2F3A; --line-strong: #383D4A;
  --good: #5FAE87; --danger: #E08080;
}
:root[data-theme="light"] {
  --bg: #EFF1F5; --surface: #FFFFFF; --surface-2: #F5F6F9; --ink: #1A1E27; --ink-hi: #262B37;
  --muted: #5B6472; --faint: #8A93A3;
  --accent: #A6752B; --accent-ink: #7C5A21; --accent-soft: #A6752B1A;
  --accent-shadow: rgba(124, 90, 33, 0.28);
  --line: #D9DDE4; --line-strong: #C3C9D3;
  --good: #3C7A5C; --danger: #B34848;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== Premium button system ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 10px 2px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: gap .18s cubic-bezier(.2,.8,.2,1), color .15s ease, opacity .15s ease, border-color .15s ease;
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .18s cubic-bezier(.2,.8,.2,1); }

/* Primary — underlined text, no box. The rule reads as a link that means business. */
.btn-primary {
  color: var(--ink);
  padding-bottom: 7px;
  border-bottom: 2px solid var(--accent);
}
.btn-primary:hover { gap: 12px; color: var(--accent-ink); }
.btn-primary:hover svg { transform: translateX(2px); }
.btn-primary:active { opacity: .65; }

/* Ghost — quieter secondary action, no underline until hover */
.btn-ghost {
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.btn-ghost:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.btn-ghost:active { opacity: .7; }

.btn-text {
  padding: 6px 2px;
  color: var(--faint); font-weight: 600; font-size: 13.5px;
  text-decoration: underline; text-underline-offset: 3px;
  border-bottom: none;
}
.btn-text:hover { color: var(--ink); }

.btn-lg { font-size: 18px; }
.btn-sm { font-size: 13.5px; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

/* ===== Shared type ===== */
.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .dot { color: var(--accent); }

.kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.fade-enter { animation: cvvFadeUp .42s cubic-bezier(.2,.6,.2,1) both; }
@keyframes cvvFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}