/* ===========================================================================
   Design tokens — Sakhuthingo Wellness  (v2 — higher contrast, less white)
   =========================================================================== */

:root {
    /* -- Core palette -------------------------------------------------- */
    --forest:       #16403F;   /* primary dark — deep forest / earth */
    --forest-deep:  #0D2C2C;
    --forest-800:   #1E524F;
    --sage:         #6C8C74;
    --sage-soft:    #B4C6B3;
    --clay:         #A64F2B;   /* accent — deep terracotta, reads on cream */
    --clay-bright:  #D06B3E;   /* accent on dark backgrounds */
    --sand:         #E3D5BC;   /* warm mid tone */
    --sand-deep:    #D8C6A6;
    --cream:        #F0E8D7;   /* page ground — clearly warm, not white */
    --paper:        #FBF6EC;   /* cards / inputs — soft, still not pure white */
    --ink:          #1D2422;   /* near-black body + headings */
    --ink-soft:     #3C443F;   /* muted text, still AA on cream */
    --white:        #FFFFFF;
    --blue:         #366F86;

    /* -- Semantic (light ground) ------------------------------------- */
    --bg:          var(--cream);
    --surface:     var(--paper);
    --text:        var(--ink);
    --text-soft:   var(--ink-soft);
    --line:        rgba(29, 36, 34, 0.20);
    --line-soft:   rgba(29, 36, 34, 0.12);
    --brand:       var(--forest);
    --accent:      var(--clay);
    --accent-ink:  #FFFFFF;
    --focus:       #1C5A57;

    /* -- Type ---------------------------------------------------------- */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --step--2: clamp(0.78rem, 0.75rem + 0.12vw, 0.84rem);
    --step--1: clamp(0.9rem, 0.86rem + 0.18vw, 1rem);
    --step-0:  clamp(1.02rem, 0.97rem + 0.28vw, 1.18rem);
    --step-1:  clamp(1.22rem, 1.1rem + 0.6vw, 1.6rem);
    --step-2:  clamp(1.55rem, 1.32rem + 1.05vw, 2.3rem);
    --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.2rem);
    --step-4:  clamp(2.5rem, 1.95rem + 2.9vw, 4.4rem);
    --step-5:  clamp(3.1rem, 2.15rem + 4.7vw, 6.2rem);

    /* -- Space ------------------------------------------------------- */
    --space-3xs: 0.375rem;
    --space-2xs: 0.625rem;
    --space-xs:  1rem;
    --space-sm:  1.5rem;
    --space-md:  2.5rem;
    --space-lg:  4rem;
    --space-xl:  6rem;
    --space-2xl: 8.5rem;

    /* -- Shape / depth --------------------------------------------- */
    --wrap:        74rem;
    --wrap-narrow: 44rem;
    --radius-sm:   10px;
    --radius:      16px;
    --radius-lg:   28px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(13, 44, 44, 0.08),
                 0 8px 20px rgba(13, 44, 44, 0.08);
    --shadow:    0 2px 6px rgba(13, 44, 44, 0.10),
                 0 20px 44px rgba(13, 44, 44, 0.12);
    --shadow-lg: 0 12px 34px rgba(13, 44, 44, 0.16),
                 0 44px 90px rgba(13, 44, 44, 0.20);

    /* -- Motion (kept minimal by design) ------------------------ */
    --ease:     cubic-bezier(0.22, 1, 0.36, 1);
    --dur:      0.4s;
    --dur-fast: 0.2s;
}

/* Dark sections — used often, for real contrast against the cream ground.
   Both .section--earth (legacy name in markup) and .section--dark work. */
.section--earth,
.section--dark {
    --bg:        var(--forest);
    --surface:   var(--forest-800);
    --text:      #F1EADB;
    --text-soft: #C6D2C8;
    --line:      rgba(255, 255, 255, 0.22);
    --line-soft: rgba(255, 255, 255, 0.14);
    --accent:    var(--clay-bright);
    background: var(--bg);
    color: var(--text);
}