/* ==========================================================================
   Sundial Tools — shared design layer
   Loaded AFTER each page's inline <style>, so it overrides the old tokens and
   base styles by source order. All page components already reference these
   token names, so redefining them here recolors every page to the new brand:
   warm umber + gold, Fraunces display, Space Mono for figures.
   Design source of truth: the homepage hero/tokens.
   ========================================================================== */

:root {
  /* warm cream (light) */
  --bg: #f5efe2;
  --bg-soft: #efe6d3;
  --card: #fffdf8;
  --card-alt: #faf4e7;
  --text: #241d12;
  --text-muted: #6c6249;
  --border: #e7dcc4;
  --accent: #b9812f;
  --accent-dark: #8f6323;
  --accent-soft: #f4e7cb;
  --accent-contrast: #fffaf0;
  --success: #4c8c6b;
  --shadow-sm: 0 1px 2px rgba(60,45,15,0.05), 0 14px 34px -18px rgba(60,45,15,0.26);
  --shadow: 0 2px 6px rgba(60,45,15,0.06), 0 30px 60px -22px rgba(60,45,15,0.38);
  --gold-glow: rgba(185,129,47,0.14);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17120b;
    --bg-soft: #1e1810;
    --card: #241c12;
    --card-alt: #2b2217;
    --text: #f4ead6;
    --text-muted: #b7ab8e;
    --border: #382d1c;
    --accent: #e3aa50;
    --accent-dark: #f4c877;
    --accent-soft: #38290f;
    --accent-contrast: #1c1305;
    --success: #7fbf9c;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 18px 40px -20px rgba(0,0,0,0.7);
    --shadow: 0 2px 8px rgba(0,0,0,0.5), 0 40px 80px -28px rgba(0,0,0,0.85);
    --gold-glow: rgba(227,170,80,0.16);
  }
}

/* ---- warm ambient background (matches homepage) ---- */
body {
  background:
    radial-gradient(1100px 560px at 82% -10%, var(--gold-glow), transparent 62%),
    var(--bg) !important;
  -webkit-font-smoothing: antialiased;
}

/* ---- display type on headings ---- */
h1, h2, h3,
.hero h1, .section-head h2, .card h2, .card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}
h1, .hero h1 { font-weight: 600; }
/* keep running body copy, leads and small utility text in the sans face */
.subtitle, .lede, .hint, .card-sub, .stat-label, .stat-sub, .tool-tag,
p, li, summary, label, input, select, button, .btn {
  font-family: var(--font-sans);
}

/* ---- figures / results in the mono ledger face ---- */
.stat-value, .total .value, .result-value, .price-value, .fee-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---- eyebrow helper (used where present) ---- */
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}

/* ---- buttons: pill, warm gold, subtle lift ---- */
.btn {
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 10px 24px -14px var(--accent);
}
.btn-primary:hover { background: var(--accent-dark); }

/* ---- cards get real depth in both themes ---- */
.card, .cta-band, .note, .disclaimer-box {
  box-shadow: var(--shadow-sm);
}
.card { border: 1px solid var(--border); }

/* ---- links in prose ---- */
.inline-link, a.inline-link { color: var(--accent-dark); text-underline-offset: 2px; }

/* ---- brand mark tweak: gold chip if the page uses a bare svg brand ---- */
.brand { letter-spacing: -0.01em; }

/* ---- accessibility floor ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}