/* =====================================================
   HEKA — REFINED PALETTE
   Inspired by hims.com (warm sand, tan accent, near-black ink)
   and apple.com (off-white, generous surfaces, restrained accent).
   Layered over style.css. Toggle palette via [data-palette] on body.
   ===================================================== */

/* ---- default: warm-sand (Hims-leaning) ---- */
body[data-palette="warm-sand"] {
  --cream: #FBF7F1;
  --oat:   #F6EFE4;          /* page background — warm linen */
  --sand:  #EFE5D4;
  --clay:  #E2D3BB;          /* soft tan, panels */
  --bg: var(--oat);
  --bg-elevated: #FFFBF4;
  --bg-card: #FFFBF4;

  --ink: #1B1714;             /* warm near-black */
  --ink-soft: #2A2521;
  --ink-muted: #6B645B;       /* warm stone */
  --ink-faint: #A39A8C;
  --ink-cream: #FBF7F1;
  --ink-cream-soft: #E2D3BB;
  --ink-cream-muted: #B5A990;

  --accent: #8C5A3A;          /* roasted clay — Hims warm tan, dialed deeper */
  --accent-hover: #6E4327;
  --accent-deep: #1B1714;
  --accent-soft: #B58966;
  --accent-tint: #EFE0CD;

  --terracotta: #B5532A;       /* secondary accent — kept for "active now" beats */
  --terracotta-deep: #8C3F1C;
  --terracotta-soft: #D08A66;
  --terracotta-tint: #F2DECF;

  --border: #E8DDC9;
  --border-strong: #D8C9AE;
  --border-dark: #1B1714;

  --warn: #B0381c;
}

/* ---- option: porcelain (Apple-leaning, cooler & whiter) ---- */
body[data-palette="porcelain"] {
  --cream: #FFFFFF;
  --oat:   #FBFAF8;
  --sand:  #F5F3EF;
  --clay:  #ECE8E1;
  --bg: var(--oat);
  --bg-elevated: #FFFFFF;
  --bg-card: #FFFFFF;

  --ink: #1D1D1F;             /* Apple system ink */
  --ink-soft: #2A2A2C;
  --ink-muted: #6E6E73;       /* Apple HIG secondary */
  --ink-faint: #A1A1A6;       /* Apple HIG tertiary */
  --ink-cream: #FFFFFF;
  --ink-cream-soft: #ECE8E1;
  --ink-cream-muted: #B8B3A8;

  --accent: #1D1D1F;          /* Apple-quiet: ink as the primary, accent reserved */
  --accent-hover: #000000;
  --accent-deep: #000000;
  --accent-soft: #6E6E73;
  --accent-tint: #ECE8E1;

  --terracotta: #B5532A;
  --terracotta-deep: #8C3F1C;
  --terracotta-soft: #D08A66;
  --terracotta-tint: #F2DECF;

  --border: #E5E2DB;
  --border-strong: #D2CEC4;
  --border-dark: #1D1D1F;

  --warn: #B0381c;
}

/* ---- option: deep-ink (editorial, dark accents on cream) ---- */
body[data-palette="deep-ink"] {
  --cream: #F4EFE6;
  --oat:   #EDE7DA;
  --sand:  #E3DBC9;
  --clay:  #CFC3AB;
  --bg: var(--oat);
  --bg-elevated: #FBF7EE;
  --bg-card: #FBF7EE;

  --ink: #14110E;
  --ink-soft: #1F1B16;
  --ink-muted: #5C544A;
  --ink-faint: #8E8675;
  --ink-cream: #F4EFE6;
  --ink-cream-soft: #CFC3AB;
  --ink-cream-muted: #A89C82;

  --accent: #1F2A33;          /* deep slate-ink */
  --accent-hover: #0E1820;
  --accent-deep: #14110E;
  --accent-soft: #4D5C68;
  --accent-tint: #D8DCE0;

  --terracotta: #B5532A;
  --terracotta-deep: #8C3F1C;
  --terracotta-soft: #D08A66;
  --terracotta-tint: #F2DECF;

  --border: #DCD2BD;
  --border-strong: #C5B89C;
  --border-dark: #14110E;

  --warn: #B0381c;
}

/* ---- shared: refine the surfaces the original style.css drew over white ---- */

/* The base body has a radial that brightens to white at the top. Tone that down
   on warm palettes so the warmth carries all the way up. */
body[data-palette="warm-sand"],
body[data-palette="deep-ink"] {
  background-image:
    radial-gradient(1200px 800px at 50% -20%, rgba(255, 255, 255, 0.20), transparent 70%);
}

/* Topbar — translucent over the new bg, not pure white */
body[data-palette="warm-sand"] .topbar,
body[data-palette="deep-ink"] .topbar {
  background: color-mix(in srgb, var(--oat) 88%, transparent);
}
body[data-palette="porcelain"] .topbar {
  background: rgba(255,255,255,0.86);
}

/* Cards — lift slightly off the page color on warm palettes */
body[data-palette="warm-sand"] .usp-card,
body[data-palette="warm-sand"] .steps-list li,
body[data-palette="deep-ink"] .usp-card,
body[data-palette="deep-ink"] .steps-list li {
  background: var(--bg-card);
  border-color: var(--border);
}

/* Mission gradient — clean it up to read as one warm wash */
body[data-palette="warm-sand"] .mission-quote,
body[data-palette="deep-ink"] .mission-quote {
  background: linear-gradient(180deg, var(--cream), var(--oat));
}

/* Buttons — keep the accent visible. The btn-primary already pulls --accent. */

/* Display italic accent — make sure it reads as a deliberate moment of color */
body[data-palette="porcelain"] .display-italic { color: var(--ink); font-style: italic; font-weight: 500; }

/* Eyebrow + section eyebrow — keep them quiet on warm palettes */
body[data-palette="warm-sand"] .section-eyebrow,
body[data-palette="deep-ink"] .section-eyebrow { color: var(--accent); }

/* Proof bar numerals — accent for the big number, ink-soft for the suffix */
body[data-palette="warm-sand"] .proof-stat,
body[data-palette="deep-ink"] .proof-stat { color: var(--ink); }
body[data-palette="porcelain"] .proof-stat { color: var(--ink); }

body[data-palette="warm-sand"] .proof-stat-suffix,
body[data-palette="deep-ink"] .proof-stat-suffix,
body[data-palette="porcelain"] .proof-stat-suffix { color: var(--accent); font-style: normal; }

/* Step number circles — match accent tint */
body[data-palette="warm-sand"] .step-num,
body[data-palette="deep-ink"] .step-num,
body[data-palette="porcelain"] .step-num {
  color: var(--accent);
  background: var(--accent-tint);
}

/* USP num — keep accent */
body[data-palette="warm-sand"] .usp-num,
body[data-palette="deep-ink"] .usp-num,
body[data-palette="porcelain"] .usp-num { color: var(--accent); }

/* Logo — the wordmark PNG/SVG is dark; on porcelain it sits naturally,
   on warm palettes it could read a touch heavy. Soften slightly. */
body[data-palette="warm-sand"] .brand-logo,
body[data-palette="deep-ink"] .brand-logo { opacity: 0.92; }

/* Footnote-launch (the small accented line under the CTA) */
body[data-palette="porcelain"] .footnote-launch { color: var(--ink-muted); }

/* =====================================================
   RESULTS — PREMIUM DARK MODE
   Lives here (not style.css) so it loads after the per-palette
   variable definitions above and wins by source order. The
   personalised routine arrives on a different surface to the
   warm-sand homepage: deep warm-charcoal with copper accents.
   Scoped entirely to body[data-screen="results"].
   ===================================================== */

body[data-screen="results"] {
  /* Surfaces */
  --bg: #0E0B08;
  --bg-elevated: #181410;
  --bg-card: #181410;
  --bg-card-raised: #221C16;

  /* Text scale (cream on charcoal) */
  --ink: #F4EFE6;
  --ink-soft: #DAD0BE;
  --ink-muted: #8F8576;
  --ink-faint: #5C5447;
  --ink-cream: #F4EFE6;
  --ink-cream-soft: #C7BBA8;
  --ink-cream-muted: #8F8576;

  /* Borders — warm shadow tones */
  --border: #2A231C;
  --border-strong: #3A2F25;

  /* Accents — burnished copper that pops on dark */
  --accent: #D08A66;
  --accent-hover: #E0A07F;
  --accent-soft: #E8B594;
  --accent-tint: rgba(208, 138, 102, 0.16);
  --accent-deep: #8C5A3A;

  --terracotta: #E68C5F;
  --terracotta-soft: #F0A483;
  --terracotta-deep: #B5532A;
  --terracotta-tint: rgba(230, 140, 95, 0.18);

  background: var(--bg);
  color: var(--ink-cream);

  background-image:
    radial-gradient(1100px 700px at 50% -10%, rgba(208, 138, 102, 0.10), transparent 70%),
    radial-gradient(900px 600px at 100% 110%, rgba(230, 140, 95, 0.05), transparent 70%);
}

/* Topbar reads on dark */
body[data-screen="results"] .topbar {
  background: rgba(14, 11, 8, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  color: var(--ink-cream);
}

/* Logo PNG is dark — flip to cream on dark */
body[data-screen="results"] .brand-logo {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

body[data-screen="results"] .topbar-meta { color: var(--accent-soft); }

/* Hero */
body[data-screen="results"] .results-hero { border-bottom-color: var(--border); }
body[data-screen="results"] .eyebrow,
body[data-screen="results"] .eyebrow-cream { color: var(--accent-soft); }
body[data-screen="results"] .results-headline { color: var(--ink-cream); }
body[data-screen="results"] .results-subhead { color: var(--ink-cream-soft); }

/* Section dividers + labels */
body[data-screen="results"] .results-section { border-top-color: var(--border); }
body[data-screen="results"] .section-label { color: var(--accent-soft); }
body[data-screen="results"] .section-meta { color: var(--ink-cream-muted); }

/* Observations */
body[data-screen="results"] .observations li {
  color: var(--ink-cream);
  border-left-color: var(--accent);
}

/* Routine product cards */
body[data-screen="results"] .product-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 1px 2px rgba(0, 0, 0, 0.4);
}
body[data-screen="results"] .product-card:hover {
  background: var(--bg-card-raised);
  border-color: var(--border-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 8px 28px rgba(0, 0, 0, 0.5);
}
body[data-screen="results"] .product-step { color: var(--accent-soft); }
body[data-screen="results"] .product-name { color: var(--ink-cream); }
body[data-screen="results"] .product-feel { color: var(--ink-cream-soft); }
body[data-screen="results"] .product-why {
  color: var(--ink-cream-soft);
  border-top-color: var(--border);
}
body[data-screen="results"] .product-why strong { color: var(--ink-cream); }
body[data-screen="results"] .product-meta,
body[data-screen="results"] .product-meta-price { color: var(--ink-cream-muted); }

/* Compare table */
body[data-screen="results"] .compare {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
body[data-screen="results"] .compare-row { border-top-color: var(--border); }
body[data-screen="results"] .compare-row-head {
  background: rgba(208, 138, 102, 0.10);
  color: var(--accent-soft);
}
body[data-screen="results"] .compare-dim { color: var(--ink-cream-muted); }
body[data-screen="results"] .compare-current { color: var(--ink-cream-soft); }
body[data-screen="results"] .compare-heka { color: var(--ink-cream); }
body[data-screen="results"] .compare-heka::before { background: var(--accent); }

/* Prose + tips */
body[data-screen="results"] .prose { color: var(--ink-cream-soft); }
body[data-screen="results"] .tips li { color: var(--ink-cream-soft); }
body[data-screen="results"] .tips li::before { color: var(--accent-soft); }

/* Trust row */
body[data-screen="results"] .trust-badge {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--ink-cream-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body[data-screen="results"] .trust-badge svg { color: var(--accent-soft); }
body[data-screen="results"] .trust-badge strong { color: var(--ink-cream); }
body[data-screen="results"] .trust-badge span { color: var(--ink-cream-muted); }

/* CTA / bundle frame — premium copper-glow panel */
body[data-screen="results"] .results-cta {
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(208, 138, 102, 0.22), transparent 60%),
    linear-gradient(180deg, #1F1813, #14100C);
  border: 1px solid var(--border-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 60px rgba(0, 0, 0, 0.5);
}
body[data-screen="results"] .cta-pitch { color: var(--ink-cream); }
body[data-screen="results"] .bundle-card {
  background: rgba(20, 16, 12, 0.6);
  border-color: var(--border-strong);
}
body[data-screen="results"] .bundle-eyebrow { color: var(--accent-soft); }
body[data-screen="results"] .bundle-name { color: var(--ink-cream); }
body[data-screen="results"] .bundle-list { color: var(--ink-cream-muted); }
body[data-screen="results"] .bundle-price-anchor {
  color: var(--ink-cream-muted);
  text-decoration-color: var(--accent-soft);
}
body[data-screen="results"] .bundle-price-now { color: var(--accent-soft); }
body[data-screen="results"] .bundle-price-meta { color: var(--ink-cream-muted); }

/* Buttons on the dark surface — copper button, near-black label */
body[data-screen="results"] .btn-primary {
  background: var(--accent);
  color: #14100B;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 6px 20px rgba(208, 138, 102, 0.25);
}
body[data-screen="results"] .btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  color: #14100B;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 10px 28px rgba(208, 138, 102, 0.35);
}
body[data-screen="results"] .btn-primary:disabled {
  background: #2A231C;
  color: var(--ink-faint);
}
body[data-screen="results"] .btn-text { color: var(--ink-cream-muted); }
body[data-screen="results"] .btn-text:hover { color: var(--ink-cream); }
body[data-screen="results"] .btn-text-light { color: var(--ink-cream-muted); }
body[data-screen="results"] .btn-text-light:hover { color: var(--ink-cream); }

/* FAQ */
body[data-screen="results"] .faq-item { border-top-color: var(--border); }
body[data-screen="results"] .faq-q { color: var(--ink-cream); }
body[data-screen="results"] .faq-a { color: var(--ink-cream-soft); }
body[data-screen="results"] .faq-toggle {
  background: rgba(208, 138, 102, 0.16);
  color: var(--accent-soft);
}
body[data-screen="results"] .faq-item.is-open .faq-toggle {
  background: var(--accent);
  color: #14100B;
}

/* Footer divider */
body[data-screen="results"] .results-footer { border-top-color: var(--border); }

/* Sticky bottom CTA on dark */
body[data-screen="results"] .sticky-cta {
  background: rgba(14, 11, 8, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
}
body[data-screen="results"] .sticky-meta { color: var(--ink-cream-soft); }
body[data-screen="results"] .sticky-cta .btn-primary {
  background: var(--accent);
  color: #14100B;
}
body[data-screen="results"] .sticky-cta .btn-primary:hover {
  background: var(--accent-hover);
  color: #14100B;
}