/*
 * Hidden Roots – Design Tokens
 * ─────────────────────────────────────────────────────────────
 * Every colour, text style, space and timing in the theme. Component and
 * template CSS reads these variables, never a literal.
 *
 * Conventions:
 *   – Colours are primitives named after the colour (--color-moss), never
 *     roles. No brand guideline exists, so the palette is drawn from the work
 *     itself: linen and paper grounds, walnut and bark wood tones, moss and
 *     forest greens, sage (kept from the original theme), ochre and clay.
 *   – Text styles are full font shorthands named by their metrics:
 *       --text-<size><family><weight>
 *       family: n = Nelson (the brand's heading face – keep it), m = Manrope,
 *               c = Cormorant Garamond italic
 *       weight: l = 300, r = 400, m = 500, s = 600, b = 700
 *   – Everything is px.
 * ─────────────────────────────────────────────────────────────
 */

:root {

    /* ── Colours ─────────────────────────────────────────────── */

    /* Grounds */
    --color-paper:   #fcfbfa;   /* the original theme's primary */
    --color-linen:   #f4eee3;   /* warm alternate sections */
    --color-sand:    #e8dcc8;   /* hairlines on linen, card backs */

    /* Wood */
    --color-walnut:  #473e39;   /* body ink – the original secondary */
    --color-bark:    #241c17;   /* dark sections, headings on light */
    --color-oak:     #9a6b43;   /* warm mid-tone, image placeholders */

    /* Leaf */
    --color-forest:  #26382b;   /* deep green sections */
    --color-moss:    #4f6b3f;   /* buttons, links – 6:1 white on it, 5.2:1 on linen */
    --color-sage:    #a3b481;   /* the original theme's green – accents on dark */

    /* Earth */
    --color-ochre:   #c8963e;   /* brass highlight – on dark only (4.7:1 on forest, 6.3:1 on bark) */
    --color-clay:    #b4643c;   /* terracotta – decoration and large text only (4.2:1 on paper) */

    --color-stone:   #6f665e;   /* meta text on light – 5.3:1 on paper */
    --color-white:   #ffffff;

    /* Alphas */
    --color-bark-60:  rgb(36 28 23 / 60%);
    --color-bark-12:  rgb(36 28 23 / 12%);
    --color-paper-70: rgb(252 251 250 / 70%);
    --color-paper-16: rgb(252 251 250 / 16%);

    /* ── Logo ────────────────────────────────────────────────── */
    /* The tree of life (assets/images/logo-tree.png, from the media
       library's logo.png) in one colour – moss on light; dark sections
       switch it to sage. */
    --logo-colour: var(--color-moss);

    /* ── Typography ──────────────────────────────────────────── */
    --font-nelson:    'nelson', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --font-manrope:   'Manrope', system-ui, sans-serif;
    --font-cormorant: 'Cormorant Garamond', Georgia, serif;

    /* Ordered by size */
    --text-12ms:   600 12px/16px var(--font-manrope);     /* Eyebrow, label – tracking 0.18em, uppercase */
    --text-14mm:   500 14px/20px var(--font-manrope);     /* Nav link, button – tracking 0.06em */
    --text-14mr:   400 14px/22px var(--font-manrope);     /* Small, captions */
    --text-17mr:   400 17px/29px var(--font-manrope);     /* Body */
    --text-20mr:   400 20px/33px var(--font-manrope);     /* Intro */
    --text-22cm:   italic 500 22px/30px var(--font-cormorant);   /* Quote attribution, flourish */
    --text-24nb:   700 24px/30px var(--font-nelson);      /* Heading 4, card title */
    --text-30cm:   italic 500 30px/38px var(--font-cormorant);   /* Testimonial – mobile */
    --text-32nb:   700 32px/38px var(--font-nelson);      /* Heading 3; Heading 2 – mobile */
    --text-40cm:   italic 500 40px/50px var(--font-cormorant);   /* Testimonial */
    --text-44nb:   700 44px/50px var(--font-nelson);      /* Heading 1 – mobile */
    --text-52nb:   700 52px/58px var(--font-nelson);      /* Heading 2 */
    --text-84nb:   700 84px/88px var(--font-nelson);      /* Heading 1 / display */

    /* ── Spacing ─────────────────────────────────────────────── */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   32px;
    --space-xl:   48px;
    --space-2xl:  72px;
    --space-3xl:  120px;

    /* ── Layout ──────────────────────────────────────────────── */
    --container-width:  1240px;
    --container-narrow: 760px;
    --gutter:           20px;
    --header-height:    76px;

    /* ── Radius ──────────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   10px;
    --radius-lg:   18px;
    --radius-arch: 999px 999px 18px 18px;   /* arched window – the signature image frame */
    --radius-pill: 100vmax;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-soft: 0 18px 40px -18px rgb(36 28 23 / 35%);
    --shadow-lift: 0 28px 60px -24px rgb(36 28 23 / 45%);

    /* ── Motion ──────────────────────────────────────────────── */
    --ease-out:        cubic-bezier(.16, 1, .3, 1);
    --transition-fast: 0.2s var(--ease-out);
    --transition-base: 0.45s var(--ease-out);
    --transition-slow: 0.9s var(--ease-out);

}

@media (min-width: 768px) {
    :root {
        --gutter: 40px;
    }
}