/* ================================================================
   Phase 1 — Design direction preview  (Stripe page only)
   Load order: tokens.css → styles.css → phase1.css
   After approval, the overrides here graduate into styles.css.
   ================================================================ */

/* ─── Nav logo — horizontal SVG wordmark ────────────────────────── */
.nav__logo { gap: 0; }

/* ─── Card — slightly deeper shadow ─────────────────────────────── */
.card {
  box-shadow: var(--sh-md);
}

/* ─── Card title — refined label style ─────────────────────────── */
.card__title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fc-text-3);
  font-weight: 600;
  gap: 6px;
}

/* ─── Input focus — crisper, brand-matched ring ─────────────────── */
input[type="number"]:focus,
input[type="text"]:focus,
input[type="date"]:focus,
select:focus {
  border-color: var(--fc-brand);
  box-shadow: 0 0 0 3px rgba(67, 56, 202, .18), 0 1px 2px rgba(0,0,0,.04);
}

/* ─── Toggle group → segmented-control style ────────────────────── */
.toggle-group {
  background: var(--fc-subtle);
  border: none;
  border-radius: var(--rr-full);
  padding: 3px;
  gap: 2px;
  overflow: visible;
}
.toggle-group label {
  border-radius: var(--rr-full);
  padding: 8px 20px;
  color: var(--fc-text-3);
  font-size: 0.875rem;
  transition: all var(--dur-normal) var(--ease-out);
}
.toggle-group input[type="radio"]:checked + label {
  background: #FFFFFF;
  color: var(--fc-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.07);
}

/* ─── Result placeholder — dashed boundary ──────────────────────── */
.result-placeholder {
  border: 2px dashed var(--fc-border);
  border-radius: var(--rr-xl);
  padding: var(--sp-16) var(--sp-6);
  background: var(--fc-subtle);
  color: var(--fc-text-4);
}

/* ─── Result big — premium display ──────────────────────────────── */
.result-big {
  padding: var(--sp-9);
  background: linear-gradient(140deg, #3730A3 0%, #4338CA 55%, #4F46E5 100%);
  border-radius: var(--rr-xl);
  box-shadow: var(--sh-brand);
  margin-bottom: var(--sp-5);
}
.result-big__label {
  font-size: 0.6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .7;
  margin-bottom: var(--sp-2);
}
.result-big__value {
  font-size: clamp(2.5rem, 7vw, 3.75rem);
  letter-spacing: -.03em;
  line-height: 1;
  margin: var(--sp-2) 0;
}
.result-big__sub {
  font-size: 0.9rem;
  opacity: .75;
  margin-top: var(--sp-1);
}

/* result-big--accent (late payment / emerald) inherits sizing above */
.result-big--accent {
  background: linear-gradient(140deg, #047857 0%, #059669 55%, #10B981 100%);
  box-shadow: 0 6px 24px rgba(5,150,105,.28);
}

/* ─── Breakdown — cleaner rows ───────────────────────────────────── */
.breakdown {
  border-radius: var(--rr-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}
.breakdown-row {
  padding: 12px 18px;
}
.breakdown-row:nth-child(even) { background: #FAFBFD; }
.breakdown-row__label { font-size: 0.8125rem; }
.breakdown-row--total {
  padding: 14px 18px;
  background: var(--fc-brand-surface) !important;
  border-top: 2px solid var(--fc-brand-border);
}
.breakdown-row--total .breakdown-row__label,
.breakdown-row--total .breakdown-row__value {
  color: var(--fc-brand);
  font-size: 0.9rem;
}

/* ─── Calc header — tighter type ────────────────────────────────── */
.calc-header h1 {
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* ─── Btn primary — subtle gradient lift ────────────────────────── */
.btn--primary {
  background: linear-gradient(to bottom, var(--fc-brand-mid), var(--fc-brand));
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.btn--primary:hover {
  background: linear-gradient(to bottom, #4338CA, #3730A3);
  box-shadow: var(--sh-md), 0 0 0 0 transparent;
  transform: translateY(-1px);
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--sh-xs);
}

/* ─── Currency / number — tabular digit widths ──────────────────── */
.result-big__value,
.result-big__sub,
.breakdown-row__value,
.breakdown-row--total .breakdown-row__value,
.proc-card__net,
.proc-card__fee,
.comparison-table td {
  font-variant-numeric: tabular-nums;
}

/* ─── Theme toggle button ────────────────────────────────────────── */
.nav__theme-btn {
  background: none;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--rr-full);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text-3, #64748B);
  transition: background 150ms ease-out, border-color 150ms ease-out;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.nav__theme-btn:hover {
  background: var(--bg, #F8FAFC);
  border-color: var(--border-2, #CBD5E1);
}

/* ================================================================
   DARK MODE
   @media = CSS-only system preference (works without JS)
   [data-theme="dark"] = JS-set attribute (toggle + auto-detect)
   Logic: dark ↔ (system dark AND not manually light) OR (manually dark)
   ================================================================ */

/* ── Dark token overrides via @media ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #0F172A; --surface: #1E293B; --border: #334155; --border-2: #475569;
    --text: #F8FAFC; --text-2: #E2E8F0; --text-3: #94A3B8; --text-4: #64748B;
    --primary-light: rgba(67,56,202,.15); --primary-border: rgba(99,102,241,.28);
    --accent-light: rgba(5,150,105,.15);  --accent-border: rgba(16,185,129,.28);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -2px rgba(0,0,0,.2);
    --shadow-lg: 0 10px 25px rgba(0,0,0,.45), 0 4px 6px -4px rgba(0,0,0,.25);
    --fc-bg: #0F172A; --fc-surface: #1E293B; --fc-subtle: #1A2740; --fc-muted: #334155;
    --fc-border: #334155; --fc-border-strong: #475569;
    --fc-text: #F8FAFC; --fc-text-2: #E2E8F0; --fc-text-3: #94A3B8; --fc-text-4: #64748B;
    --fc-brand-surface: rgba(67,56,202,.15); --fc-brand-border: rgba(99,102,241,.28);
    --sh-xs: 0 1px 2px rgba(0,0,0,.3);
    --sh-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
    --sh-md: 0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -2px rgba(0,0,0,.2);
    --sh-brand: 0 6px 24px rgba(99,102,241,.4);
  }
  /* Component overrides — hardcoded values that tokens cannot reach */
  html:not([data-theme="light"]) .alert--info    { background: rgba(14,165,233,.1); border-color: rgba(14,165,233,.25); color: #7DD3FC; }
  html:not([data-theme="light"]) .alert--warning { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25); color: #FCD34D; }
  html:not([data-theme="light"]) .alert--danger  { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.25);  color: #FCA5A5; }
  html:not([data-theme="light"]) .alert--success { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); color: #6EE7B7; }
  html:not([data-theme="light"]) .breakdown-row:nth-child(even) { background: rgba(255,255,255,.03); }
  html:not([data-theme="light"]) .toggle-group input[type="radio"]:checked + label {
    background: #334155;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
  }
  html:not([data-theme="light"]) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
  html:not([data-theme="light"]) .input-prefix,
  html:not([data-theme="light"]) .input-suffix { background: #334155; border-color: #475569; color: #94A3B8; }
  /* SVG wordmark text (Stripe page) */
  html:not([data-theme="light"]) .nav__logo svg text:first-of-type { fill: #E2E8F0; }
  html:not([data-theme="light"]) .nav__logo svg text:last-of-type  { fill: #818CF8; }
  html:not([data-theme="light"]) .badge--updated { background: rgba(14,165,233,.1); border-color: rgba(14,165,233,.25); color: #7DD3FC; }
  html:not([data-theme="light"]) .tool-card__icon.tool-card__icon--sky   { background: rgba(14,165,233,.15); }
  html:not([data-theme="light"]) .tool-card__icon.tool-card__icon--amber { background: rgba(245,158,11,.15); }
}

/* ── Dark token overrides via [data-theme="dark"] ── */
html[data-theme="dark"] {
  --bg: #0F172A; --surface: #1E293B; --border: #334155; --border-2: #475569;
  --text: #F8FAFC; --text-2: #E2E8F0; --text-3: #94A3B8; --text-4: #64748B;
  --primary-light: rgba(67,56,202,.15); --primary-border: rgba(99,102,241,.28);
  --accent-light: rgba(5,150,105,.15);  --accent-border: rgba(16,185,129,.28);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -2px rgba(0,0,0,.2);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.45), 0 4px 6px -4px rgba(0,0,0,.25);
  --fc-bg: #0F172A; --fc-surface: #1E293B; --fc-subtle: #1A2740; --fc-muted: #334155;
  --fc-border: #334155; --fc-border-strong: #475569;
  --fc-text: #F8FAFC; --fc-text-2: #E2E8F0; --fc-text-3: #94A3B8; --fc-text-4: #64748B;
  --fc-brand-surface: rgba(67,56,202,.15); --fc-brand-border: rgba(99,102,241,.28);
  --sh-xs: 0 1px 2px rgba(0,0,0,.3);
  --sh-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --sh-md: 0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -2px rgba(0,0,0,.2);
  --sh-brand: 0 6px 24px rgba(99,102,241,.4);
}
html[data-theme="dark"] .alert--info    { background: rgba(14,165,233,.1); border-color: rgba(14,165,233,.25); color: #7DD3FC; }
html[data-theme="dark"] .alert--warning { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25); color: #FCD34D; }
html[data-theme="dark"] .alert--danger  { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.25);  color: #FCA5A5; }
html[data-theme="dark"] .alert--success { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); color: #6EE7B7; }
html[data-theme="dark"] .breakdown-row:nth-child(even) { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .toggle-group input[type="radio"]:checked + label {
  background: #334155;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .input-prefix,
html[data-theme="dark"] .input-suffix { background: #334155; border-color: #475569; color: #94A3B8; }
html[data-theme="dark"] .nav__logo svg text:first-of-type { fill: #E2E8F0; }
html[data-theme="dark"] .nav__logo svg text:last-of-type  { fill: #818CF8; }
html[data-theme="dark"] .badge--updated { background: rgba(14,165,233,.1); border-color: rgba(14,165,233,.25); color: #7DD3FC; }
html[data-theme="dark"] .tool-card__icon.tool-card__icon--sky   { background: rgba(14,165,233,.15); }
html[data-theme="dark"] .tool-card__icon.tool-card__icon--amber { background: rgba(245,158,11,.15); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .stats-strip { background: var(--fc-surface, #1E293B); }
}
html[data-theme="dark"] .stats-strip { background: var(--fc-surface, #1E293B); }

/* ================================================================
   DISPLAY TYPEFACE — Plus Jakarta Sans
   h1/h2 only; Inter covers all UI, body copy, and numbers.
   ================================================================ */
h1, h2 {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, sans-serif;
}
h1 { letter-spacing: -0.025em; }
h2 { letter-spacing: -0.02em; }
.hero h1 {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}