/* ============================================================
   theme-light.css — wonders.estate editorial light palette
   Overrides playbook/articulos dark tokens with v3 light theme.
   Apply via <link rel="stylesheet" href="/content/theme-light.css">
   AFTER all other stylesheets so overrides take effect.
   ============================================================ */

:root {
  /* palette */
  --bg: #faf7f2;
  --bg-warm: #faf7f2;
  --bg-panel: #ffffff;
  --bg-elev: #ffffff;
  --bg-deep: #f3efe7;
  --bg-soft: #ffffff;
  --bg-sunk: #f3efe7;
  --bg-tint: #f7f3ec;

  /* ink */
  --cream: #111111;
  --cream-dim: #2a2a2a;
  --cream-muted: #666666;
  --cream-faded: #8a8a8a;
  --ivory: #1a1a1a;
  --ink: #111111;
  --ink-2: #2a2a2a;
  --ink-3: #555555;
  --ink-4: #8a8a8a;
  --ink-5: #b5b5b5;

  /* accent — kept warm but toned down */
  --gold: #9a7942;
  --gold-deep: #7b5f33;
  --gold-soft: rgba(154,121,66,0.08);
  --accent: #9a7942;
  --terra: #b24a2d;
  --emerald: #5d6b57;

  /* tier chips (match v3) */
  --tier-s: #b24a2d;
  --tier-a: #9a7942;
  --tier-b: #5d6b57;
  --tier-c: #6b7a8a;
  --tier-d: #8a8a8a;

  /* lines */
  --line: rgba(17,17,17,0.08);
  --line-strong: rgba(17,17,17,0.16);
  --line-2: rgba(17,17,17,0.12);
  --line-3: rgba(17,17,17,0.18);

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(17,17,17,0.04), 0 1px 1px rgba(17,17,17,0.02);
  --shadow-md: 0 4px 14px rgba(17,17,17,0.06), 0 1px 3px rgba(17,17,17,0.04);
  --shadow-lg: 0 24px 60px rgba(17,17,17,0.08), 0 4px 14px rgba(17,17,17,0.04);

  /* typography */
  --sans: 'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --display: 'Inter', 'Inter Tight', -apple-system, sans-serif;
  --serif: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* Base body */
html, body { background: var(--bg) !important; }
body {
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
}

/* Nav (playbook reuses main SPA nav) */
.nav {
  background: rgba(250,247,242,0.88) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.nav-brand { color: var(--ink) !important; }
.nav-link { color: var(--ink-3) !important; }
.nav-link:hover, .nav-link.active { color: var(--ink) !important; }
.nav-cta {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}
.nav-cta:hover { background: var(--ink-2) !important; }

/* ─────────── Playbook layout ─────────── */
.wrap { background: var(--bg); }
.pb-page, .wrap { color: var(--ink); }

.pb-hero { border-bottom-color: var(--line) !important; }
.pb-hero .eyebrow {
  color: var(--ink-4) !important;
  font-family: var(--mono);
  font-weight: 500 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
}
.pb-hero h1 {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-size: 56px !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
}
.pb-hero h1 em {
  font-style: italic !important;
  color: var(--ink-3) !important;
  font-weight: 400 !important;
}
.pb-hero .sub {
  color: var(--ink-3) !important;
  font-size: 16.5px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  max-width: 720px !important;
}
.pb-hero .sub em { color: var(--ink) !important; font-style: normal; font-weight: 500; }

/* Section */
.pb-section h2 {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
}
.pb-section h3 {
  color: var(--ink-4) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
}
.pb-section p { color: var(--ink-3) !important; font-size: 14.5px !important; line-height: 1.68 !important; }
.pb-section p em { color: var(--ink) !important; font-style: normal; font-weight: 500; }
.pb-section ul { color: var(--ink-3) !important; font-size: 14.5px !important; }
.pb-section code {
  background: var(--bg-tint) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line);
  font-family: var(--mono);
}
.pb-section a {
  color: var(--ink) !important;
  border-bottom: 1px solid var(--ink-4) !important;
}
.pb-section a:hover { border-bottom-color: var(--ink) !important; }

/* Cards */
.pb-card-grid { gap: 14px !important; }
.pb-card {
  background: var(--bg-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
  box-shadow: var(--shadow-sm);
}
.pb-card:hover {
  border-color: var(--line-3) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pb-card h4 {
  color: var(--ink-4) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
}
.pb-card p { color: var(--ink-3) !important; font-size: 14px !important; }
.pb-card .cta {
  color: var(--ink) !important;
  border: 1px solid var(--line-3) !important;
  background: var(--bg-soft);
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}
.pb-card .cta:hover {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}

/* Tools (wizards) */
.pb-tool {
  background: var(--bg-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-sm);
}
.pb-form label { color: var(--ink-4) !important; font-family: var(--mono) !important; }
.pb-field-q { color: var(--ink-4) !important; font-family: var(--mono) !important; }
.pb-form input, .pb-form select {
  background: var(--bg) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  font-family: var(--sans);
  font-size: 14px;
  border-radius: 8px !important;
}
.pb-form input:focus, .pb-form select:focus {
  border-color: var(--ink) !important;
}
.pb-form .radio-group label {
  background: var(--bg-tint) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-3) !important;
  border-radius: 999px !important;
}
.pb-form .radio-group label:hover {
  border-color: var(--line-3) !important;
  color: var(--ink) !important;
}
.pb-form .radio-group input:checked+span { color: var(--ink) !important; }
.pb-form .radio-group label:has(input:checked) {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--bg) !important;
}

/* Results block */
.pb-result {
  background: var(--bg-tint) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
}
.pb-result h4 {
  color: var(--ink-4) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
}
.pb-breakdown th {
  color: var(--ink-4) !important;
  font-family: var(--mono) !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--line) !important;
}
.pb-breakdown td {
  color: var(--ink-3) !important;
  border-bottom: 1px solid var(--line) !important;
  font-family: var(--sans);
}
.pb-breakdown td b { color: var(--ink) !important; font-weight: 600 !important; }
.pb-breakdown tr.total td {
  color: var(--ink) !important;
  border-top: 1px solid var(--ink) !important;
  font-weight: 700 !important;
}
.pb-breakdown td.paidby {
  color: var(--ink-4) !important;
  font-family: var(--mono) !important;
}

.pb-rec {
  background: var(--bg-tint) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 14px !important;
}
.pb-rec h4 { color: var(--ink-4) !important; font-family: var(--mono) !important; }
.pb-rec .score { color: var(--ink) !important; font-weight: 700 !important; }
.pb-rec p { color: var(--ink-3) !important; }
.pb-rec p b { color: var(--ink) !important; font-weight: 600 !important; }
.pb-rec a { color: var(--ink) !important; border-bottom: 1px solid var(--ink-4); }

/* Flags */
.pb-flags .flag {
  background: var(--bg-soft) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-3) !important;
  border-radius: 12px !important;
}
.pb-flags .flag b { color: var(--ink) !important; font-weight: 600 !important; }
.pb-flags .flag.crit {
  background: rgba(178,74,45,0.06) !important;
  border-color: rgba(178,74,45,0.22) !important;
  color: #8a3820 !important;
}
.pb-flags .flag.warn {
  background: rgba(154,121,66,0.07) !important;
  border-color: rgba(154,121,66,0.24) !important;
  color: #6d5324 !important;
}
.pb-flags .flag.ok {
  background: rgba(93,107,87,0.07) !important;
  border-color: rgba(93,107,87,0.22) !important;
  color: #3d4a3a !important;
}

/* Vehicles */
.pb-vehicle {
  background: var(--bg-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm);
}
.pb-vehicle h4 {
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  letter-spacing: -0.015em !important;
}
.pb-vehicle .tagline {
  color: var(--ink-4) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
}
.pb-vehicle p { color: var(--ink-3) !important; font-size: 14px !important; line-height: 1.65 !important; }
.pb-vehicle p b { color: var(--ink) !important; font-weight: 600 !important; }
.pb-vehicle .two-col h5 {
  color: var(--ink-4) !important;
  font-family: var(--mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
}
.pb-vehicle .two-col ul { color: var(--ink-3) !important; font-size: 13.5px !important; }

/* Footnote */
.footnote {
  color: var(--ink-4) !important;
  border-top: 1px solid var(--line) !important;
  font-family: var(--sans) !important;
}
.footnote b { color: var(--ink-2) !important; font-weight: 600 !important; }
.footnote a { color: var(--ink) !important; border-bottom: 1px solid var(--ink-4); }
.footnote a:hover { border-bottom-color: var(--ink) !important; }

/* Subnav */
.pb-subnav { border-bottom: 1px solid var(--line) !important; }
.pb-subnav .topnav-link {
  color: var(--ink-3) !important;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 7px 14px;
  transition: all 0.15s ease;
}
.pb-subnav .topnav-link:hover {
  color: var(--ink) !important;
  background: var(--bg-tint) !important;
}
.pb-subnav .topnav-link.is-active {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: none !important;
}

/* ─────────── Articulos (content pages) ─────────── */
.art-page { color: var(--ink); }
.art-hero h1, .art-page h1 {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.03em !important;
}
.art-hero h1 em, .art-page h1 em {
  font-style: italic !important;
  color: var(--ink-3) !important;
  font-weight: 400 !important;
}
.art-page h2 {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
}
.art-page h3, .art-page h4 {
  color: var(--ink-4) !important;
  font-family: var(--mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}
.art-page p {
  color: var(--ink-2) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}
.art-page p em { color: var(--ink) !important; font-style: italic; }
.art-page a { color: var(--ink) !important; border-bottom: 1px solid var(--ink-4); }
.art-page blockquote {
  background: var(--bg-tint) !important;
  border-left: 3px solid var(--ink) !important;
  color: var(--ink-2) !important;
}
.art-page table th {
  background: var(--bg-tint) !important;
  color: var(--ink-4) !important;
  font-family: var(--mono) !important;
  border-bottom: 1px solid var(--line) !important;
}
.art-page table td {
  color: var(--ink-3) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Utility overrides for any inline bg-dark leftovers */
[style*="background:#0c0b09"],
[style*="background: #0c0b09"],
[style*="background:#13110d"] {
  background: var(--bg-soft) !important;
}

/* Meta theme-color */