/* =========================================================
   24R Theme Design Tokens
   Change colors here first when you want a new palette.
========================================================= */
:root {
    --shop-primary: #0971B7;
    --shop-primary-dark: #075E98;
    --shop-primary-deep: #053E66;
    --shop-primary-soft: #EEF8FB;

    --shop-accent: #10ABB6;
    --shop-accent-dark: #0C8F99;
    --shop-accent-soft: rgba(16, 171, 182, 0.14);

    --shop-text: #073B5F;
    --shop-muted: #5F7181;
    --shop-border: #D7ECF4;
    --shop-surface: #FFFFFF;

    --shop-success: #18A957;
    --shop-danger: #F00614;

    /* Existing component variables are mapped here for backward compatibility. */
    --shop-header-bg: var(--shop-primary);
    --shop-header-bg-alt: var(--shop-primary-dark);
    --shop-header-accent: var(--shop-accent);
    --shop-header-button-bg: var(--shop-accent);
    --shop-header-button-text: #FFFFFF;
    --shop-header-dropdown-text: var(--shop-text);
    --shop-header-dropdown-muted: var(--shop-muted);
    --shop-header-border: var(--shop-border);
}