/* -----------------------------------------------------------------------------
   Landing page paper/serif/mono restyle (overrides css/landing-variants.css)
   Loads AFTER landing-variants.css. Remaps the existing --lv-* tokens to the
   paper palette so all .lp-* components pick up the new look without touching
   the markup. Light is default; body.theme-dark switches to dark paper.
----------------------------------------------------------------------------- */

/* --- Shared light palette (also applies when no theme-dark class is set) --- */
.variant-hybrid,
body:not(.theme-dark).variant-hybrid {
    --lv-display: "Fraunces", Georgia, serif;
    --lv-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --lv-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    --lv-bg:            #F6F1E8;
    --lv-bg-layer:      none;
    --lv-panel:         #FBF7EF;
    --lv-chip:          rgba(26, 23, 20, 0.05);
    --lv-screen-bg:     #EFE8DB;
    --lv-border:        rgba(26, 23, 20, 0.10);
    --lv-border-strong: rgba(26, 23, 20, 0.18);
    --lv-text:          #3B3630;
    --lv-text-soft:     #6B645B;
    --lv-text-strong:   #1A1714;
    --lv-accent:        #2F6B4F;

    /* schematic SVG palette — overridden in dark below */
    --ssvg-ink:        #1A1714;
    --ssvg-ink-2:      #3B3630;
    --ssvg-ink-3:      #8A8274;
    --ssvg-paper:      #F6F1E8;
    --ssvg-paper-2:    #FBF7EF;
    --ssvg-line:       rgba(26, 23, 20, 0.14);
    --ssvg-line-soft:  rgba(26, 23, 20, 0.06);
    --ssvg-green:      #2F6B4F;
    --ssvg-green-2:    #4E8A6A;
    --ssvg-green-soft: rgba(47, 107, 79, 0.14);
    --ssvg-brown:      #8A5A2B;
    --ssvg-rust:       #B7552B;
    --ssvg-tan:        #C9935B;
}

body.theme-dark.variant-hybrid {
    --lv-bg:            #14120F;
    --lv-bg-layer:      none;
    --lv-panel:         #1A1713;
    --lv-chip:          rgba(242, 236, 224, 0.05);
    --lv-screen-bg:     #1C1915;
    --lv-border:        rgba(242, 236, 224, 0.10);
    --lv-border-strong: rgba(242, 236, 224, 0.18);
    --lv-text:          #C9C1B2;
    --lv-text-soft:     #8A8274;
    --lv-text-strong:   #F2ECE0;
    --lv-accent:        #6BB089;

    --ssvg-ink:        #F2ECE0;
    --ssvg-ink-2:      #C9C1B2;
    --ssvg-ink-3:      #8A8274;
    --ssvg-paper:      #14120F;
    --ssvg-paper-2:    #1A1713;
    --ssvg-line:       rgba(242, 236, 224, 0.14);
    --ssvg-line-soft:  rgba(242, 236, 224, 0.06);
    --ssvg-green:      #6BB089;
    --ssvg-green-2:    #8FC5A7;
    --ssvg-green-soft: rgba(107, 176, 137, 0.20);
    --ssvg-brown:      #C9935B;
    --ssvg-rust:       #D88159;
    --ssvg-tan:        #C9935B;
}

/* --- Typography: Inter body, Fraunces headings, mono for numbers --- */
.variant-hybrid.lp-body,
.variant-hybrid .lp-topbar,
.variant-hybrid .lp-footer {
    font-family: var(--lv-body) !important;
}
.variant-hybrid h1,
.variant-hybrid h2,
.variant-hybrid h3,
.variant-hybrid .lp-hero h1,
.variant-hybrid .lp-section-head h2 {
    font-family: var(--lv-display) !important;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--lv-text-strong);
}
.variant-hybrid .lp-metric .k,
.variant-hybrid .lp-price {
    font-family: var(--lv-mono) !important;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}

/* --- Remove the old gradient background layer, use flat cream/near-black --- */
.variant-hybrid .lp-bg {
    background: var(--lv-bg) !important;
}

/* --- Cards and borders --- */
.variant-hybrid .lp-card,
.variant-hybrid .lp-step-card,
.variant-hybrid .lp-feature-card,
.variant-hybrid .lp-path-card,
.variant-hybrid .lp-price-card,
.variant-hybrid .lp-inline-card {
    background: var(--lv-panel) !important;
    border: 1px solid var(--lv-border) !important;
    box-shadow: none !important;
}

/* --- Topbar --- */
.variant-hybrid .lp-topbar {
    background: color-mix(in srgb, var(--lv-panel) 86%, transparent) !important;
    border-bottom: 1px solid var(--lv-border);
    backdrop-filter: blur(8px);
}
/* Invert the white-on-dark logo when on light paper */
body:not(.theme-dark).variant-hybrid .lp-brand img {
    filter: invert(1) brightness(0.15);
}

/* --- Primary CTA / login button --- */
.variant-hybrid .lp-nav a.primary,
.variant-hybrid .lp-btn.primary {
    background: var(--lv-accent) !important;
    color: var(--lv-panel) !important;
    border: 1px solid var(--lv-accent) !important;
    font-weight: 600;
}
body.theme-dark.variant-hybrid .lp-nav a.primary,
body.theme-dark.variant-hybrid .lp-btn.primary {
    color: #14120F !important;
}
.variant-hybrid .lp-btn.primary.disabled {
    opacity: 0.72;
    cursor: default;
}

/* --- Eyebrows / ribbons --- */
.variant-hybrid .lp-eyebrow,
.variant-hybrid .lp-ribbon,
.variant-hybrid .lp-estate-label {
    font-family: var(--lv-body) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    color: var(--lv-text-soft);
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* --- Chips --- */
.variant-hybrid .lp-chip {
    background: var(--lv-chip) !important;
    border: 1px solid var(--lv-border) !important;
    color: var(--lv-text-strong) !important;
    border-radius: 999px;
}

/* --- Metric strip (Money Flow) --- */
.variant-hybrid .lp-metric {
    background: var(--lv-chip) !important;
    border: 1px solid var(--lv-border) !important;
}
.variant-hybrid .lp-metric .v {
    color: var(--lv-text-soft) !important;
    font-family: var(--lv-body) !important;
}

/* --- Figure captions --- */
.variant-hybrid .lp-shot figcaption {
    color: var(--lv-text-soft);
    font-size: 12px;
    letter-spacing: 0.04em;
    font-family: var(--lv-body) !important;
    background: transparent !important;
}

/* --- Figure frames: replace dark screen-bg with paper-elevated --- */
.variant-hybrid .lp-shot {
    background: var(--lv-panel) !important;
    border: 1px solid var(--lv-border) !important;
    border-radius: 14px;
    overflow: hidden;
}
.variant-hybrid .lp-shot img,
.variant-hybrid .lp-shot .schematic-svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--lv-screen-bg);
}

/* --- Schematic inline SVGs --- */
.schematic-svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: var(--lv-body);
}
.schematic-svg .s-ink        { fill: var(--ssvg-ink); }
.schematic-svg .s-ink-2      { fill: var(--ssvg-ink-2); }
.schematic-svg .s-ink-3      { fill: var(--ssvg-ink-3); }
.schematic-svg .s-paper      { fill: var(--ssvg-paper); }
.schematic-svg .s-paper-2    { fill: var(--ssvg-paper-2); }
.schematic-svg .s-green      { fill: var(--ssvg-green); }
.schematic-svg .s-green-2    { fill: var(--ssvg-green-2); }
.schematic-svg .s-green-soft { fill: var(--ssvg-green-soft); }
.schematic-svg .s-brown      { fill: var(--ssvg-brown); }
.schematic-svg .s-rust       { fill: var(--ssvg-rust); }
.schematic-svg .s-tan        { fill: var(--ssvg-tan); }
.schematic-svg .s-line       { stroke: var(--ssvg-line);      fill: none; }
.schematic-svg .s-line-soft  { stroke: var(--ssvg-line-soft); fill: none; }
.schematic-svg .s-line-ink   { stroke: var(--ssvg-ink);       fill: none; }
.schematic-svg .s-line-green { stroke: var(--ssvg-green);     fill: none; }
.schematic-svg .s-stroke-ink { stroke: var(--ssvg-ink); }
.schematic-svg text.s-display { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.schematic-svg text.s-mono    { font-family: "JetBrains Mono", ui-monospace, monospace; font-feature-settings: "tnum"; }

/* --- Estate progress rail --- */
.variant-hybrid .lp-estate-item {
    background: var(--lv-chip) !important;
    border: 1px solid var(--lv-border) !important;
}
.variant-hybrid .lp-estate-item.complete .lp-estate-bar { background: var(--lv-accent); }
.variant-hybrid .lp-estate-item.generating .lp-estate-bar { background: var(--ssvg-tan, var(--lv-accent)); }
.variant-hybrid .lp-estate-item.queued .lp-estate-bar { background: var(--lv-border-strong); }
.variant-hybrid .lp-estate-badge {
    background: var(--lv-chip) !important;
    color: var(--lv-text-strong) !important;
    border: 1px solid var(--lv-border) !important;
}

/* --- Security shield: swap the teal/navy gradients for paper tokens --- */
.variant-hybrid .lp-shield-svg path[fill^="url(#shieldFill)"] { fill: var(--lv-panel); }
.variant-hybrid .lp-shield-svg path[stroke^="url(#shieldStroke)"] { stroke: var(--lv-accent); }
.variant-hybrid .lp-shield-svg path[stroke="#1ed6a5"] { stroke: var(--lv-accent); }

/* --- Theme toggle pill (re-used from wealthwise-theme.css style) --- */
.lp-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px;
    background: var(--lv-chip);
    border: 1px solid var(--lv-border);
    border-radius: 999px;
    margin-right: 10px;
}
.lp-theme-toggle .tt-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--lv-text-soft);
    font-family: var(--lv-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
}
.lp-theme-toggle .tt-btn.on {
    background: var(--lv-accent);
    color: var(--lv-panel);
}
body.theme-dark .lp-theme-toggle .tt-btn.on { color: #14120F; }