/*
    assets/css/tokens.css

    The ozroofracks.shop palette, copied verbatim from
    ozroofracks.shop/app/globals.css so the two sites converge on one visual
    language. Added 2026-08-20 as the foundation for restyling public_html.

    .shop is the design lab; public_html is the site that keeps the 39,006
    indexed URLs. Rather than migrate the site to .shop, the agreed direction
    is to bring .shop's look here -- these tokens are the first piece of that.

    DEFINING THEM CHANGES NOTHING ON ITS OWN. Nothing consumes these variables
    yet; they are declarations waiting to be referenced. Components get moved
    onto them one at a time, each verified against the page baseline, so a
    restyle is never entangled with a plumbing change.

    Poppins is already available site-wide: main.css line 2 imports
    Poppins:500,700,800 from Google Fonts, and it is the same face .shop uses.
    header.php separately loads Fira Sans, which is worth resolving when
    typography is tackled -- two font families are being fetched.
*/

:root {
    /* Core palette -- identical values to .shop */
    --ink: #0b1b2a;
    --ink-soft: #263848;
    --blue: #0877c9;
    --blue-dark: #005a9f;
    --sky: #eaf6ff;
    --line: #dce5ec;
    --muted: #657582;
    --white: #fff;
    --surface: #f4f7f9;

    /*
    .shop uses a SECOND, slightly lighter grey for its alternating section
    bands -- #f5f8fa, not --surface. Measured off the live site: cards and
    inset panels sit on --surface, full-width bands on this. Close enough
    that using one for both looks like a mistake rather than a choice.
    */
    --band: #f5f8fa;
    --navy: #0b1b2a;
    --orange: #eb5b1f;

    /* Typography -- .shop sets this on html/body and uses it for h1-h3 */
    --font-display: "Poppins", Helvetica, sans-serif;

    /* .shop's focus ring, kept so keyboard focus matches across both sites */
    --focus: #f4a51c;
}