/*
 * Woodulight brand tokens.
 *
 * Measured off the live woodulight.com (2026-07-22) with the pages open in a browser, not
 * scraped: colours read from computed styles on the product and workshop pages, shape and
 * rhythm read from screenshots at 1440px and 390px.
 *
 * What the live site actually does, and what these tokens therefore encode:
 *
 *   - The page ground is WHITE, not cream. An earlier pass used a beige page background;
 *     woodulight.com is #fff everywhere and lets the photography carry all the warmth.
 *     That single mistake is most of why the first attempt read as «not the same business».
 *   - Nothing is rounded. Images are square, and the «SHOP NOW» button computes to
 *     border-radius: 0px. The old --wl-radius: 5px / 20px pair was invented.
 *   - #E0BE91 is a TEXT and HAIRLINE colour on the live site (product captions, breadcrumbs,
 *     section headings), not a fill. Filling large areas with it looks nothing like the site.
 *   - The primary button is near-black (#020202), square, 12px/30px padding — not tan.
 *   - text-transform is `none` on every element sampled, which happens to match the Greek
 *     capitals rule exactly: nothing here is ever CSS-uppercased.
 *   - Comfortaa is the only face. It is a variable font; see comfortaa.css for why the
 *     weight axis had to be declared as a range before bold rendered at all.
 */

@import url('/assets/vendor/fonts/comfortaa/comfortaa.css');

:root {
    /* Wood — the logo's own browns. The mark is a cut log end, drawn in #8c6441. */
    --wl-wood: #e0be91;        /* warm tan: captions, hairlines, seat rings still free */
    --wl-wood-dark: #c9a173;   /* hover / pressed */
    --wl-timber: #8c6441;      /* the logo brown: taken seat rings, emphasis */
    --wl-timber-deep: #6f4e33; /* pressed state on timber */
    --wl-sage: #919a80;        /* the one cool accent; admin.css uses it for quiet states */

    /* Text */
    --wl-ink: #020202;         /* the live site's button fill and strongest text */
    --wl-heading: #333333;     /* h1 on the live product page */
    --wl-text: #232323;
    --wl-muted: #6d6d6d;       /* body copy on the live site is grey, not black */

    /* Surfaces */
    --wl-bg: #ffffff;
    --wl-sheet: #ffffff;       /* the offset card that sits over a photograph */
    --wl-tint: #f7f2ea;        /* warm band, used sparingly — never as the page ground */
    --wl-rule: #eeeeee;
    --wl-rule-strong: #d8d8d8;

    /* State */
    --wl-danger: #b3261e;
    --wl-success: #3f6d4e;

    /* Type */
    --wl-font: 'Comfortaa', 'Trebuchet MS', 'Lucida Grande', sans-serif;
    --wl-line-height: 1.7;

    /*
     * Shape.
     *
     * THIS FILE IS SHARED. The public pages load it and so does Kelly's admin, which is why
     * this is 5px and not 0: the public site is square like woodulight.com, but setting 0
     * here squared off every control in the admin as a side effect of a public-site decision
     * — and the admin is Quasar, whose components are drawn expecting a radius.
     *
     * The public override lives in public.css, scoped to .wl. Anything in here has to be
     * true for BOTH surfaces; if it is only true for one, it belongs in that one's file.
     */
    --wl-radius: 5px;

    /* Rhythm */
    --wl-gutter: 20px;
    --wl-measure: 62ch;        /* body copy never runs wider than this */
}