/*
    THE PALETTE. Every colour the site can be, in one file.

    Loaded before app.css, designer.css and requests.css, all three of which now name colours only
    through the custom properties declared here. Nothing below draws anything: this file is the
    vocabulary, and the other three sheets are what is said with it.

    WHY ONE FILE. Before this, the palette was seven properties on :root in app.css, three more
    scoped to .designer in designer.css, and thirteen hard-coded #fff panels spread across all three
    sheets. That arrangement works exactly as long as nobody wants a second palette — a :root
    override cannot reach a property declared on .designer, and it cannot reach a literal at all, so
    a dark theme produced white cards on a dark page and a designer that kept its light-theme reds.
    Collecting the vocabulary here is what makes [data-theme] a complete switch rather than a mostly
    complete one.

    Values come from docs/product/site-themes.md, which carries the measured WCAG contrast ratios for
    each pair. Do not add a colour here without adding it there first.

    ---------------------------------------------------------------- the default is not a theme

    :root below is the site EXACTLY as it stood before theming existed, down to the #fff panels. An
    untouched visit renders pixel for pixel what it always did, and no customer's site changes colour
    because this file landed.

    Theme 1, "Maple & Ink", is the same palette tidied — its one real difference is --panel #fffdf8
    instead of #fff, so cards read as warm paper rather than as a hole in the page. It is therefore a
    genuine choice rather than a no-op, which is why it is one of the ten and not the default.

    The consequence: with no data-theme attribute set, none of the ten options is marked as current.

    SINCE 2026-10-05 THE STUDIO DEFAULT IS TIDEWATER SLATE (Scott's choice). The server renders
    data-theme="tidewater-slate" on <html> (ThemeBoot.DefaultTheme), so :root below is now only the
    palette a page shows if that attribute is ever missing.
*/

:root {
    /* ---- surfaces */
    --page: #f5f0e6;        /* the one page ground */
    --panel: #fff;          /* cards, inputs, outline buttons — the raised surface */
    --figure: #e8dfcc;      /* letterbox behind photographs, and the tinted sub-panel below */

    /*
        How much backing shows around a photograph. A LENGTH among the colours, which is the odd
        one out in this file and is here rather than in app.css for the reason the colours are:
        it is a property of how the site looks, and a theme that wanted a wider mount should be
        able to say so in one place next to the colour it would be painting.
    */
    --figure-mat: 0.75rem;
    --header-bg: #e8dfcc;   /* the band across the top, public and admin */

    /*
        The tinted ground for filters, sidebars, notices and disabled steps: a surface that is
        recessed rather than raised, the opposite of --panel. It has always been the same value as
        the figure backing, and every theme keeps that relationship, so it is derived rather than
        declared ten more times. var() resolves at use, so this follows --figure automatically.
    */
    --inset: var(--figure);

    /* ---- text */
    --text: #1a1714;
    --text-muted: #4a423a;  /* 30+ selectors; must stay body-copy legible, not decorative grey */
    --header-text: #1a1714; /* the brand wordmark in the header band */

    /*
        The brand link's hover. It has its own role because the global a:hover paints --link-hover,
        a near-black chosen for the page, and on the six dark bands that turned the tree and the
        name dark slate on dark slate (Scott, 2026-10-12). Those six set it to white; on a light
        band white would vanish, so there it stays the band's own text colour.
    */
    --header-brand-hover: var(--header-text);

    /* ---- links */
    --link: #8c4a2f;
    --link-hover: #12100e;

    /*
        Navigation links get their own pair because four of the ten themes put a dark band behind
        them, where the page's rust link falls under 3:1 and becomes unreadable. Everywhere else
        they are simply the page's links, which is what keeps the default untouched.
    */
    --header-link: var(--link);
    --header-link-hover: var(--link-hover);

    /* ---- lines and accents */
    --rule: #d8cfbb;        /* hairlines: table rows, card edges, section rules */
    --accent: #8c4a2f;      /* focus rings, accent-color, the checked swatch */

    /* ---- the filled button, and everything that borrows its weight */
    --button-bg: #12100e;
    --button-text: #f5f0e6;

    /*
        ---- status

        Three colours and two tints for the three things the site has to be able to say: this is
        blocked, this needs thought, this is fine. They were scoped to .designer and are :root now
        because the admin notices, the inbox statuses and the contact form's field errors were
        already using the same hexes by hand.
    */
    --status-blocking: #a3231b;
    --status-warning: #7a4f00;
    --status-ok: #2f6b3a;
    --status-blocking-tint: #fdf4f3;
    --status-warning-tint: #fbf6ec;

    /*
        ---- the near-duplicates

        Five colours that are the status roles in spirit but were written by hand, months apart, at
        values a shade or two off: the admin's destructive button and its confirmation tint, the
        contact form's error sentence, and the inbox's "in progress". They are declared separately
        so the default stays byte-for-byte what it was, and folded into the real status roles the
        moment any theme is chosen — see :root[data-theme] at the foot of this file.
    */
    --danger: #8c2f2f;
    --danger-hover: #6d2424;
    --danger-text: #fff;    /* on a FILLED danger button, so it tracks the fill, not --panel */
    --danger-tint: #fdf6f4;
    --field-error: #8c1c15; /* darkened from the border colour to clear 4.5:1 on the page */
    --status-progress: #7a5a12;

    /*
        ---- two translucent details

        The drawing's drop shadow and the ring that keeps a white paint chip visible against a white
        step. Both were black-ish literals, and both are invisible on a dark theme — the shadow
        because there is nothing darker than the page to cast onto, the ring because a dark ring on a
        dark panel is not a ring. Themed, they are mixed from --text, so they invert with it.

        The default values below are the literals they replace, unchanged.
    */
    --canvas-shadow: rgb(26 23 20 / 18%);
    --chip-ring: rgb(0 0 0 / 0.25);
}

/* ================================================================ the ten themes

   One block each, overriding only the roles above. Nothing here selects an element, so a theme can
   never change a layout — the worst a wrong value can do is look wrong.

   Order matches docs/product/site-themes.md, which is also the order the picker lists them in. */

/* 1. Maple & Ink — the studio as it is: planed maple, ink, a shellac-brown link. */
[data-theme="maple-ink"] {
    --page: #f5f0e6;
    --panel: #fffdf8;
    --figure: #e8dfcc;
    --header-bg: #e8dfcc;
    --text: #1a1714;
    --text-muted: #4a423a;
    --header-text: #1a1714;
    --link: #8c4a2f;
    --link-hover: #12100e;
    --rule: #d8cfbb;
    --accent: #8c4a2f;
    --button-bg: #12100e;
    --button-text: #f5f0e6;
    --status-blocking: #a3231b;
    --status-warning: #7a4f00;
    --status-ok: #2f6b3a;
    --status-blocking-tint: #fdf4f3;
    --status-warning-tint: #fbf6ec;
}

/* 2. Warm Walnut — a walnut band across the top of a sanded page. */
[data-theme="warm-walnut"] {
    --page: #efe6d8;
    --panel: #f9f3e8;
    --figure: #e3d6c2;
    --header-bg: #3d2b1f;
    --text: #2b211a;
    --text-muted: #5a4c3e;
    --header-text: #f3e9da;
    --header-brand-hover: #ffffff;
    --link: #7a3f22;
    --link-hover: #2b211a;
    --rule: #cfc0a8;
    --accent: #8f4f2c;
    --button-bg: #3d2b1f;
    --button-text: #f3e9da;
    --status-blocking: #9b2119;
    --status-warning: #73490a;
    --status-ok: #2c6537;
    --status-blocking-tint: #f8ece6;
    --status-warning-tint: #f5eddc;

    /* Dark band: the page's rust link is under 3:1 on it. See --header-link above. */
    --header-link: var(--header-text);
    --header-link-hover: var(--header-text);
}

/* 3. Sapele Morning — the same room an hour later; rosier paper, a hotter link. */
[data-theme="sapele-morning"] {
    --page: #f6ece3;
    --panel: #fdf7f1;
    --figure: #eadbcc;
    --header-bg: #eadbcc;
    --text: #2a1a12;
    --text-muted: #5a4336;
    --header-text: #2a1a12;
    /*
        Also darkened 3%, from #9c4a2a, for the same reason as White Oak Quarter's. This one
        technically passed at 4.52:1 on its header band — two hundredths over the line, which is
        not a margin, it is a rounding accident. 4.73:1 now.
    */
    --link: #974829;
    --link-hover: #2a1a12;
    --rule: #ddc8b4;
    --accent: #9c4a2a;
    --button-bg: #43261a;
    --button-text: #f6ece3;
    --status-blocking: #a3231b;
    --status-warning: #7a4f00;
    --status-ok: #2f6b3a;
    --status-blocking-tint: #fbeee8;
    --status-warning-tint: #f9f0e0;
}

/* 4. White Oak Quarter — quiet, dry, grey-warm; the most forgiving under mixed-species photos. */
[data-theme="white-oak-quarter"] {
    --page: #f2efe9;
    --panel: #faf8f4;
    --figure: #e6e1d7;
    --header-bg: #e6e1d7;
    --text: #232019;
    --text-muted: #55504a;
    --header-text: #232019;

    /*
        DARKENED 3% on 2026-09-23, from #7a6438. The header band on this theme is darker than the
        page, and --header-link inherits --link, so the nav links were being read against #e6e1d7
        rather than against #f2efe9: 4.35:1, under the 4.5 AA needs. The theme spec had checked
        link-on-PAGE (4.94:1) and passed it, because --header-link is a role the implementation
        introduced and the spec's table never covered.
        Now 4.56:1 on the band and 5.18:1 on the page. Caught by a browser contrast sweep, not by
        the palette design.
    */
    --link: #766136;
    --link-hover: #232019;
    --rule: #d5cec1;
    --accent: #7a6438;
    --button-bg: #232019;
    --button-text: #f2efe9;
    --status-blocking: #9e2219;
    --status-warning: #6f5410;
    --status-ok: #2d6538;
    --status-blocking-tint: #f7efe9;
    --status-warning-tint: #f5f1e2;
}

/* 5. Chestertown Green — cream page, deep green sign-painter's band. */
[data-theme="chestertown-green"] {
    --page: #f4f1e6;
    --panel: #fbfaf3;
    --figure: #e5e4d2;
    --header-bg: #24352c;
    --text: #1f2a22;
    --text-muted: #4c574b;
    --header-text: #eef3ec;
    --header-brand-hover: #ffffff;
    --link: #33654a;
    --link-hover: #1f2a22;
    --rule: #d4d3bf;
    --accent: #33654a;
    --button-bg: #24352c;
    --button-text: #f4f1e6;
    --status-blocking: #9d221a;
    --status-warning: #745016;
    --status-ok: #2c6138;
    --status-blocking-tint: #f8eee7;
    --status-warning-tint: #f7f1dd;

    --header-link: var(--header-text);
    --header-link-hover: var(--header-text);
}

/* 6. Chesapeake Fog — flat light over the water; grey-green paper, almost no warmth. */
[data-theme="chesapeake-fog"] {
    --page: #eef0ec;
    --panel: #fbfcfa;
    --figure: #dfe3de;
    --header-bg: #dfe3de;
    --text: #1f2a26;
    --text-muted: #4b5852;
    --header-text: #1f2a26;
    --link: #3f6b57;
    --link-hover: #16211d;
    --rule: #c9d0c8;
    --accent: #3f6b57;
    --button-bg: #24332d;
    --button-text: #eef0ec;
    --status-blocking: #9c2219;
    --status-warning: #6f5310;
    --status-ok: #2b6340;
    --status-blocking-tint: #f6eeec;
    --status-warning-tint: #f5f1e4;
}

/* 7. Tidewater Slate — cool grey page under a slate band. */
[data-theme="tidewater-slate"] {
    --page: #eceef1;
    --panel: #f9fafb;
    --figure: #dde3e9;
    --header-bg: #2f3a44;
    --text: #1e262d;
    --text-muted: #4b5660;
    --header-text: #e7ecf1;
    --header-brand-hover: #ffffff;
    --link: #2f5d7c;
    --link-hover: #14202b;
    --rule: #ccd3da;
    --accent: #2f5d7c;
    --button-bg: #2f3a44;
    --button-text: #eceef1;
    --status-blocking: #9c2219;
    --status-warning: #6d5416;
    --status-ok: #2b6340;
    --status-blocking-tint: #f6eeee;
    --status-warning-tint: #f4f1e6;

    --header-link: var(--header-text);
    --header-link-hover: var(--header-text);
}

/*
    8. Oyster Shell — the accessibility theme. Every text pair clears AAA, and --rule is the only
    one of the ten that also clears the 3:1 that WCAG 1.4.11 asks of a meaningful UI boundary.
*/
[data-theme="oyster-shell"] {
    --page: #fbfaf7;
    --panel: #fdfcf9;
    --figure: #ece8e0;
    --header-bg: #14120f;
    --text: #14120f;
    --text-muted: #3b3630;
    --header-text: #fbfaf7;
    --header-brand-hover: #ffffff;
    --link: #7a3218;
    --link-hover: #14120f;
    --rule: #8c857a;
    --accent: #7a3218;
    --button-bg: #14120f;
    --button-text: #fbfaf7;
    --status-blocking: #8a1a12;
    --status-warning: #5d4207;
    --status-ok: #1f5730;
    --status-blocking-tint: #f7ece9;
    --status-warning-tint: #f6f0e2;

    --header-link: var(--header-text);
    --header-link-hover: var(--header-text);
}

/*
    9. Linseed & Lamplight — the warm dark theme: the shop at night with one bulb on.

    color-scheme tells the browser to draw its own furniture dark too. Without it the select
    dropdowns, date picker, checkboxes and scrollbars stay light, and a dark page with a white
    scrollbar down the side of it looks like a rendering fault rather than a choice.
*/
[data-theme="linseed-lamplight"] {
    color-scheme: dark;

    --page: #1c1815;
    --panel: #241f19;
    --figure: #2e2721;
    --header-bg: #262019;
    --text: #ece2d2;
    --text-muted: #b4a692;
    --header-text: #f0e6d6;
    --header-brand-hover: #ffffff;
    --link: #d99a5b;
    --link-hover: #f0c894;
    --rule: #3a3229;
    --accent: #d99a5b;
    --button-bg: #d99a5b;
    --button-text: #1c1815;
    --status-blocking: #f08a7e;
    --status-warning: #e0b352;
    --status-ok: #7fc48d;
    --status-blocking-tint: #2a1d1a;
    --status-warning-tint: #2a2318;
}

/*
    10. Night Shop — the cool dark theme: graphite and a green cutting-fluid accent.

    --status-ok is deliberately a different green from --link. They are close enough to be confused
    at a glance, and "this is a link" and "this worked" are not the same message; the half-step
    between #7fbf9a and #7fc9a0 is what keeps a success notice from reading as a row of links.
*/
[data-theme="night-shop"] {
    color-scheme: dark;

    --page: #14181a;
    --panel: #1a2023;
    --figure: #232b2e;
    --header-bg: #1b2124;
    --text: #dfe7e3;
    --text-muted: #9aa8a2;
    --header-text: #e8eeeb;
    --header-brand-hover: #ffffff;
    --link: #7fbf9a;
    --link-hover: #a9d9bd;
    --rule: #2b3336;
    --accent: #7fbf9a;
    --button-bg: #7fbf9a;
    --button-text: #12181a;
    --status-blocking: #f2897d;
    --status-warning: #dfb257;
    --status-ok: #7fc9a0;
    --status-blocking-tint: #231a1a;
    --status-warning-tint: #242217;
}

/* ================================================================ once a theme is chosen

   The near-duplicates and the two translucent details, folded into the roles they were always
   approximating. One block rather than six more lines in each of the ten, because the mapping is
   the same every time: there is no theme in which the admin's destructive red should be a different
   red from the designer's blocking red — they only differ today because they were written months
   apart.

   :root[data-theme] matches whenever ANY theme is active and never on the untouched default, which
   is exactly the distinction being drawn. Its specificity is higher than a [data-theme="slug"]
   block, so these win; no theme block sets any of them, so nothing is being fought over.

   The two hover/ring mixes are derived rather than given, because a derived value inverts with the
   theme for free: color-mix toward --text darkens on a light theme and lightens on a dark one,
   which is the behaviour both of them need and neither of them could get from a literal. */
:root[data-theme] {
    --danger: var(--status-blocking);
    --danger-hover: color-mix(in srgb, var(--status-blocking) 75%, var(--text));
    --danger-text: var(--page);
    --danger-tint: var(--status-blocking-tint);
    --field-error: var(--status-blocking);
    --status-progress: var(--status-warning);

    --canvas-shadow: color-mix(in srgb, var(--text) 18%, transparent);
    --chip-ring: color-mix(in srgb, var(--text) 45%, transparent);
}