/*
 * DG & Sons – 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-oak), never
 *     roles. The palette is a builder's yard: chalk and stone grounds,
 *     graphite and charcoal (steel, slate roofs), oak and cedar (timber),
 *     sage and brick for success and errors. The same seven main colours
 *     are the editor palette in theme.json.
 *   – Text styles are full font shorthands named by their metrics:
 *       --text-<size><family><weight>
 *       family: g = Gelica (headings), a = Archivo (everything else)
 *       weight: r = 400, m = 500, s = 600
 *   – Everything is px.
 *
 * Contrast (WCAG AA): charcoal on chalk 12:1, slate on chalk 5.6:1, cedar on
 * chalk 5.3:1, white on cedar 5.8:1, oak on graphite 5.5:1, chalk on
 * graphite 14.9:1. Oak is never text on a light ground.
 * ─────────────────────────────────────────────────────────────
 */

:root {

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

    /* Grounds */
    --color-chalk:    #f6f3ee;   /* page */
    --color-stone:    #ebe5db;   /* alternate sections, page headers */
    --color-putty:    #d8cebf;   /* hairlines, borders */
    --color-white:    #ffffff;   /* cards, the form */

    /* Ink */
    --color-graphite: #1c201e;   /* headings, dark sections */
    --color-charcoal: #2c312e;   /* body text */
    --color-slate:    #5d625e;   /* meta and secondary text */

    /* Timber */
    --color-oak:      #c08a4e;   /* accent – on dark grounds, icons, rules */
    --color-cedar:    #8b5a2b;   /* links and buttons on light grounds */
    --color-cedar-dark: #74491f; /* cedar button, hovered */
    --color-oak-light:  #d29b5c; /* oak button, hovered */

    /* States */
    --color-sage:     #3f6b4a;   /* success */
    --color-brick:    #a63d2f;   /* errors */

    /* Alphas */
    --color-chalk-92:  rgb(246 243 238 / 92%);
    --color-putty-60:  rgb(216 206 191 / 60%);
    --color-white-75:  rgb(255 255 255 / 75%);
    --color-white-25:  rgb(255 255 255 / 25%);
    --color-white-12:  rgb(255 255 255 / 12%);
    --color-brick-05:  rgb(166 61 47 / 5%);
    --color-graphite-60: rgb(28 32 30 / 60%);

    /* ── Typography ──────────────────────────────────────────── */
    /* Gelica comes from Adobe Fonts (inc/theme-setup.php). */
    --font-gelica:   gelica, gelica-fallback, Georgia, serif;
    --font-archivo:  Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Ordered by size */
    --text-11as:  600 11px/14px var(--font-archivo);    /* Logo tag line – tracking 0.18em, uppercase */
    --text-12as:  600 12px/16px var(--font-archivo);    /* Eyebrow, label – tracking 0.14em, uppercase */
    --text-13am:  500 13px/16px var(--font-archivo);    /* Action bar */
    --text-14am:  500 14px/20px var(--font-archivo);    /* Small UI */
    --text-14ar:  400 14px/22px var(--font-archivo);    /* Captions, breadcrumbs */
    --text-15am:  500 15px/20px var(--font-archivo);    /* Nav link */
    --text-15ar:  400 15px/24px var(--font-archivo);    /* Small */
    --text-15as:  600 15px/22px var(--font-archivo);    /* Form label, button */
    --text-16ar:  400 16px/26px var(--font-archivo);    /* Card text */
    --text-17ar:  400 17px/29px var(--font-archivo);    /* Body */
    --text-20ar:  400 20px/32px var(--font-archivo);    /* Intro */
    --text-20gm:  500 20px/26px var(--font-gelica);     /* Heading 4 */
    --text-24gm:  500 24px/30px var(--font-gelica);     /* Card title */
    --text-28gm:  500 28px/34px var(--font-gelica);     /* Heading 3, logo */
    --text-30gm:  500 30px/36px var(--font-gelica);
    --text-36gm:  500 36px/42px var(--font-gelica);     /* Heading 2 – phones */
    --text-48gm:  500 48px/54px var(--font-gelica);     /* Heading 2; Heading 1 – phones */
    --text-64gm:  500 64px/68px var(--font-gelica);     /* Heading 1 */
    --text-72gm:  500 72px/76px var(--font-gelica);     /* Home hero, beside photos */
    --text-84gm:  500 84px/86px var(--font-gelica);     /* Home hero */

    /* ── 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:    68px;

    /* ── Radius ──────────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-pill: 100vmax;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-soft: 0 20px 44px -24px rgb(28 32 30 / 38%);
    --shadow-lift: 0 30px 60px -28px rgb(28 32 30 / 48%);

    /* ── 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;
    }
}

@media (min-width: 1100px) {
    :root {
        --header-height: 80px;
    }
}