/* Mirrored from the Liverpool source repo tokens/ folder for the docs
   site's own live theme switcher (Settings Panel + Drawer in the header) —
   settings-panel.js fetches these by plain path (${tokenBase}palettes/
   palette-<name>.css), and the real CDN only has individually-signed
   bundles for the "blue" and "green" brand palettes specifically, not a
   generic per-name endpoint for the rest. Keep in sync by hand if the
   source tokens change. */

/* ============================================================
   Twinkle Design System — v2
   Palette: Blue (Default)
   ============================================================
   This is the default palette — core/tokens.css already sets
   these values. Link this file explicitly if you want to reset
   to blue after applying another palette.
   ============================================================ */

@layer themes {

:root {
    /* Named colors */
    --palatinate-blue: #1f35ff;
    --risd-blue:       #3145ff;
    --rich-black:      #000214;
    --gunmetal:        #272c35;
    --cool-gray:       #727083;
    --thistle:         #b8b4cc;
    --platinum:        #dbdce3;
    --ghost-white:     #f2f2fc;
    --seasalt:         #f8f9fb;

    /* Color scale */
    --tw-color-0: #ffffff;
    --tw-color-1: var(--palatinate-blue);
    --tw-color-2: var(--risd-blue);
    --tw-color-3: var(--rich-black);
    --tw-color-4: var(--gunmetal);
    /* ADA/WCAG AA fix (2026-08-28): --cool-gray was #8a8899, only
       3.46:1 against white/color-9 (needs 4.5:1 as body text —
       this slot feeds --tw-color-text-muted). Darkened, same hue/
       saturation, to 4.82:1. See tokens/palettes/ROADMAP note. */
    --tw-color-5: var(--cool-gray);
    --tw-color-6: var(--thistle);
    --tw-color-7: var(--platinum);
    --tw-color-8: var(--ghost-white);
    --tw-color-9: var(--seasalt);

    /* Dark HSL for color-3: #000214 → 230deg 100% 3.9% */
    --tw-color-dark-hsl: 230deg 100% 3.9%;
}

} /* end @layer themes */