/* ============================================================
   Trees of Health — design tokens
   Brand: botanical diabetic skincare. Rooted, generous, unhurried.
   ============================================================ */

:root {
  /* --- Brand palette (from guidelines) --- */
  --tree-green: #3C6E6E;     /* primary */
  --dark-forest: #0A373C;    /* deep surface / text */
  --lime: #EBFFC8;           /* pale lime highlight */
  --mint: #A0D7B4;           /* soft mint */
  --deep-water: #3319C3;     /* deep indigo (rare accent) */
  --periwinkle: #7993DD;
  --peach: #EA937F;          /* coral */
  --flower-red: #A02758;     /* berry */

  /* --- Paper / warm neutrals --- */
  --paper: #EFEDE3;          /* warm off-white shop bg */
  --paper-2: #E6E2D4;        /* slightly deeper */
  --paper-card: #F5F3EB;
  --ink: #0A373C;            /* default text on light */
  --ink-soft: #3a5a5a;
  --hairline: rgba(10, 55, 60, 0.14);

  /* --- Semantic (light theme default) --- */
  --bg: var(--paper);
  --surface: var(--paper-card);
  --surface-2: #ffffff;
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-faint: rgba(10, 55, 60, 0.55);
  --line: var(--hairline);
  --accent: var(--tree-green);
  --accent-2: var(--flower-red);
  --on-accent: #F5F3EB;
  --tag-bg: var(--dark-forest);
  --tag-text: var(--lime);

  /* --- Type --- */
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --serif: 'Spectral', Georgia, serif;

  /* --- Radius / shadow --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --shadow-sm: 0 1px 2px rgba(10,55,60,.06), 0 6px 18px rgba(10,55,60,.05);
  --shadow-md: 0 4px 14px rgba(10,55,60,.08), 0 24px 60px rgba(10,55,60,.10);

  /* --- CTA style (overridden by tweak) --- */
  --cta-radius: 999px;

  /* --- Layout --- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* Dark Forest theme */
[data-theme="dark"] {
  --bg: var(--dark-forest);
  --surface: #0e4248;
  --surface-2: #114a50;
  --text: #EAF3EC;
  --text-soft: #b9d6cf;
  --text-faint: rgba(234, 243, 236, 0.55);
  --line: rgba(160, 215, 180, 0.18);
  --accent: var(--mint);
  --accent-2: var(--peach);
  --on-accent: var(--dark-forest);
  --tag-bg: var(--mint);
  --tag-text: var(--dark-forest);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .4s ease, color .4s ease;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* Scrollbar tone */
* { scrollbar-color: var(--accent) transparent; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Utility */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); width: 100%; }
.serif { font-family: var(--serif); font-weight: 300; letter-spacing: 0; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; display: inline-block; }

/* Buttons (CTA style driven by --cta-radius + data-cta) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  padding: 15px 28px; border-radius: var(--cta-radius);
  background: var(--accent); color: var(--on-accent);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, box-shadow .25s, border-color .25s, color .25s;
  border: 1.5px solid transparent; line-height: 1; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.btn--dark { background: var(--dark-forest); color: var(--lime); }
.btn--block { width: 100%; }
.btn--lg { padding: 18px 34px; font-size: 16px; }

/* data-cta variants control radius + treatment globally */
[data-cta="pill"]   { --cta-radius: 999px; }
[data-cta="soft"]   { --cta-radius: 14px; }
[data-cta="square"] { --cta-radius: 0px; }

/* Outline/underline CTA flavor */
[data-cta="underline"] .btn {
  --cta-radius: 0;
  background: transparent; color: var(--text); border: none; padding: 8px 2px;
  border-bottom: 2px solid var(--accent); border-radius: 0;
}
[data-cta="underline"] .btn:hover { transform: none; box-shadow: none; color: var(--accent); letter-spacing: 0.02em; }
[data-cta="underline"] .btn--ghost { border-bottom: 2px solid var(--line); }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}