/* ============================================
   BRAND COLOUR SCHEME - "jet blue"
   Built from the two logo colours:
     #1C7FD8  jet blue (the spray)
     #1B2836  deep navy (the nozzle)
   ============================================ */

:root {

    /* awin-sidebar accent (its --cf-accent reads this) */
    --cat-primary: #1C7FD8;

    /* ── Primary: jet blue ───────────────────────
       Ramp from the logo blue. 500 is the logo
       colour itself. 700+ are the accessible text
       shades (white text on 500 is about 4.1:1,
       so 500 is a *surface* colour, not a text
       colour). */
    --brand-50:  #EEF6FD;
    --brand-100: #D7EAFA;
    --brand-200: #B0D5F5;
    --brand-300: #7DB9EE;
    --brand-400: #4A9BE4;
    --brand-500: #1C7FD8;   /* logo jet blue */
    --brand-600: #1369BA;
    --brand-700: #0F5698;   /* safe on white: 4.6:1 */
    --brand-800: #0E4579;
    --brand-900: #0D3860;

    /* ── Neutral: navy ─────────────────────
       Ramp from the logo navy. 900 is the logo
       colour. Cool, to sit with the blue. */
    --ink-50:  #F4F6F8;
    --ink-100: #ECEFF2;
    --ink-200: #DCE1E6;
    --ink-300: #C2C9D0;
    --ink-400: #98A2AC;
    --ink-500: #78838E;
    --ink-600: #5A6672;
    --ink-700: #45515D;
    --ink-800: #2C3A48;
    --ink-900: #1B2836;   /* logo navy */
    --ink-950: #111B26;

    /* ── Semantic roles ───────────────────────── */
    --brand-primary:       var(--brand-500);
    --brand-primary-dark:  var(--brand-700);
    --brand-primary-light: var(--brand-50);
    --brand-accent:        var(--brand-500);

    /* Text */
    --text-primary:   var(--ink-900);
    --text-secondary: var(--ink-700);
    --text-muted:     var(--ink-600);
    --text-onbrand:   #ffffff;
    --text-link:      var(--brand-700);

    /* Surfaces */
    --surface-white:  #ffffff;
    --surface-light:  var(--ink-50);
    --surface-tint:   var(--brand-50);
    --surface-dark:   var(--ink-900);
    --surface-darker: var(--ink-950);

    /* Lines */
    --border-light:  var(--ink-200);
    --border-medium: var(--ink-300);

    /* ── Status ────────────────────────────────
       Kept distinct from the blue so a warning
       never reads as a brand element. */
    --success:     #1E8E4F;
    --success-bg:  #E8F5EE;
    --warning:     #1F6FB2;
    --warning-bg:  #FDF6E3;
    --danger:      #C62828;
    --danger-bg:   #FDECEC;
    --info:        #1F6FB2;
    --info-bg:     #EAF3FB;

    /* Price / savings badges */
    --price-colour: var(--brand-700);
    --sale-colour:  #C62828;

    /* ── Depth ─────────────────────────────────
       Shadows tinted with the navy rather than
       pure black, so they sit in the same family. */
    --shadow-sm: 0 1px 3px rgba(27, 40, 54, 0.08);
    --shadow-md: 0 4px 16px rgba(27, 40, 54, 0.10);
    --shadow-lg: 0 10px 34px rgba(27, 40, 54, 0.13);
    --shadow-brand: 0 6px 18px rgba(28, 127, 216, 0.28);

    /* ── Gradients ─────────────────────────────── */
    --grad-brand: linear-gradient(135deg, #4A9BE4 0%, #1C7FD8 50%, #1369BA 100%);
    --grad-dark:  linear-gradient(135deg, #1B2836 0%, #2C3A48 60%, #111B26 100%);
    --grad-hero:  linear-gradient(135deg, #1B2836 0%, #2C3A48 45%, #0F5698 100%);

    /* ── Shape ─────────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Legacy aliases — old variable names used
       around the site, remapped to the new scheme
       so nothing is left un-themed. */
    --header-brand:     var(--brand-500);
    --header-green:     var(--brand-400);
    --header-light-bg:  var(--brand-50);
    --header-text-dark: var(--ink-900);
    --header-border:    var(--ink-200);
}

/* ── Focus ring ─────────────────────────────────
   One visible ring everywhere, in the brand colour. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Selection ─────────────────────────────────── */
::selection {
    background: var(--brand-500);
    color: #fff;
}

/* ── Buy / CTA buttons ─────────────────────────
   Bold green so "go to retailer" buttons stand out
   against the blue and navy brand colours. */
:root {
    --cta:       #16A34A;
    --cta-hover: #0E8A3E;
    --cta-text:  #ffffff;
}

.btn-primary-cta,
.btn-cta-large,
.mobile-cta-btn,
.btn-go-retailer,
.btn-search-buy,
.cat-card-cta,
.favCardActions .btn-primary-cta {
    background: var(--cta) !important;
    color: var(--cta-text) !important;
    border-color: var(--cta) !important;
}

.btn-primary-cta:hover,
.btn-cta-large:hover,
.mobile-cta-btn:hover,
.btn-go-retailer:hover,
.btn-search-buy:hover,
.cat-card-cta:hover,
.favCardActions .btn-primary-cta:hover {
    background: var(--cta-hover) !important;
    color: var(--cta-text) !important;
    box-shadow: 0 8px 22px rgba(22, 163, 74, 0.35) !important;
}


/* Product photos: padding never pushes an image past its box (the ranked list clipped wheels) */
img { box-sizing: border-box; }