/*
  Kombucha theme: the look of the launch invite (01-brand/event-invite-kombucha.webp), for the
  Vegan Kombucha range the launch features. Laid over brand/brand.css by
    node tools/make-publish.mjs --theme kombucha --out ../publish-kombucha
  The default build never includes this file.

  Colours sampled from the invite:
    terracotta #aa6a44, sand #d4bda3, dark brown #643e29, cream #f4e6d5  (the "Kombucha tones" swatches)
    title brown #7f5230  ("THE FUTURE OF SKINCARE" and its rule)
    card cream #fdf9f2, text #1b1915
  Contrast (WCAG): text #1b1915 16.7:1 on the page, 14.3:1 on cream; secondary text #6e5847
  (derived) 6.4:1 and 5.4:1; title brown 6.4:1 and 5.4:1; cream on dark brown 7.6:1.
  Terracotta is 4.1:1 on the page, so it's used only for decoration, never for small text.
*/

:root {
  --theme-name: "kombucha";

  --color-brand: #643e29;      /* dark brown: buttons, chosen answers, result panel, Story panel */
  --color-brand-deep: #4f3020; /* pressed buttons (derived, deeper) */
  --color-accent: #7f5230;     /* title brown: step labels, focus ring */
  --color-terracotta: #aa6a44; /* decoration only: progress bar, list markers, warning edge */
  --color-paper: #fdf9f2;      /* card cream */
  --color-backdrop: #f4e6d5;   /* cream, behind product photos and on the start stage */
  --color-heading: #643e29;    /* dark brown */
  --color-ink: #1b1915;        /* brown-black text */
  --color-ink-soft: #6e5847;   /* secondary text (derived from the browns) */
  --color-line: #d4bda3;       /* sand hairlines */
  --color-on-brand: #f4e6d5;   /* cream on dark brown */
}

/* Start: "THE FUTURE OF SKINCARE" from the invite, with its rule, above the logo and the tagline */
.brand-lockup .logo { order: 0; }

/* Bold and tightly spaced as on the invite, the rule close under it, a little more room above the logo */
.brand-lockup::after {
  content: "THE FUTURE OF SKINCARE";
  order: -1;
  margin-bottom: 8px;
  padding: 2px 2px 3px;
  border-bottom: 1px solid var(--color-accent);
  font: 700 var(--step--1) / 1.1 var(--font-display);
  letter-spacing: 0.03em;
  color: var(--color-accent);
}

/* The tagline (written as on the invite in both looks, css/base.css) in the theme's brown */
.brand-lockup .tagline {
  order: 2;
  color: var(--color-heading);
}

/* Section titles in the invite's brown capitals, with a thin rule under them */
.result-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-accent);
  font: 600 var(--step-2) / 1.2 var(--font-display);
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.quiz-bar { background: var(--color-terracotta); }
.product-reasons li::marker { color: var(--color-terracotta); }
.product-warning { border-left-color: var(--color-terracotta); }
.result-kicker { opacity: 0.85; }