/* ============================================
   BRAND COLOUR SCHEME - "garden green on slate"
   bestplasticshed.co.uk (12 Nov 2026)
     #2E7D5B  garden green (primary)
     #23634A  darker green (hover)
     #EEF7F2  light green tint
     #1F2A33  slate ink
   ============================================ */

:root {

    /* awin-sidebar / collection article accent (they read this) */
    --cat-primary: #2E7D5B;

    /* ── Primary: garden green ─────────────────
       500 is the primary. White text on 500 is
       about 5:1, so it works for buttons and links. */
    --brand-50:  #EEF7F2;
    --brand-100: #D6EDE1;
    --brand-200: #AFDAC4;
    --brand-300: #7FC1A0;
    --brand-400: #4F9F7B;
    --brand-500: #2E7D5B;   /* primary */
    --brand-600: #23634A;   /* hover */
    --brand-700: #1D553F;
    --brand-800: #184534;
    --brand-900: #13372A;

    /* ── Neutral: slate ───────────────────────── */
    --ink-50:  #F4F6F7;
    --ink-100: #EBEFF1;
    --ink-200: #DAE0E4;
    --ink-300: #BFC8CE;
    --ink-400: #97A3AC;
    --ink-500: #76838D;
    --ink-600: #5A6670;
    --ink-700: #45515A;
    --ink-800: #2E3A44;
    --ink-900: #1F2A33;   /* slate ink */
    --ink-950: #141C22;

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

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

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

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

    /* Status - kept apart from the green so a warning never reads as brand */
    --success:     #2E7D5B;
    --success-bg:  #EEF7F2;
    --warning:     #8A4B00;
    --warning-bg:  #FFF4DE;
    --danger:      #C62828;
    --danger-bg:   #FDECEC;
    --info:        #45515A;
    --info-bg:     #EBEFF1;

    --price-colour: var(--ink-900);
    --sale-colour:  #C62828;

    --shadow-sm: 0 1px 3px rgba(31, 42, 51, 0.08);
    --shadow-md: 0 4px 16px rgba(31, 42, 51, 0.10);
    --shadow-lg: 0 10px 34px rgba(31, 42, 51, 0.13);
    --shadow-brand: 0 6px 18px rgba(46, 125, 91, 0.28);

    --grad-brand: linear-gradient(135deg, #4F9F7B 0%, #2E7D5B 50%, #23634A 100%);
    --grad-dark:  linear-gradient(135deg, #1F2A33 0%, #2E3A44 60%, #141C22 100%);
    --grad-hero:  linear-gradient(135deg, #1F2A33 0%, #2E3A44 45%, #2E7D5B 100%);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Old variable names used around the site, mapped to the scheme */
    --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);

    /* Buy / CTA buttons */
    --cta:       #2E7D5B;
    --cta-hover: #23634A;
    --cta-text:  #ffffff;
}

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 {
    background: var(--brand-500);
    color: #fff;
}

.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(46, 125, 91, 0.35) !important;
}

/* Product photos: padding never pushes an image past its box */
img { box-sizing: border-box; }