/* ============================================
   BRAND COLOUR SCHEME
   Built from the two logo colours:
     #F56D1F  orange
     #2B3034  charcoal
   ============================================ */

:root {

    /* ── Primary: orange ───────────────────────
       Ramp from the logo orange. 500 is the logo
       colour itself. 700+ are the accessible text
       shades (white text on 500 is only 2.96:1,
       so 500 is a *surface* colour, not a text
       colour). */
    --brand-50:  #FFF4ED;
    --brand-100: #FFE4D2;
    --brand-200: #FFC5A3;
    --brand-300: #FDA06B;
    --brand-400: #F98440;
    --brand-500: #F56D1F;   /* logo orange */
    --brand-600: #DE5C12;
    --brand-700: #C2540F;   /* safe on white: 4.6:1 */
    --brand-800: #9A4210;
    --brand-900: #7A350F;

    /* ── Neutral: charcoal ─────────────────────
       Ramp from the logo charcoal. 900 is the logo
       colour. Slightly cool to sit with the orange. */
    --ink-50:  #F7F8F8;
    --ink-100: #EDEFF0;
    --ink-200: #DDE0E2;
    --ink-300: #C3C8CB;
    --ink-400: #9AA1A6;
    --ink-500: #767D83;
    --ink-600: #5A6169;
    --ink-700: #444A50;
    --ink-800: #363B40;
    --ink-900: #2B3034;   /* logo charcoal */
    --ink-950: #1D2124;

    /* ── 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 orange so a warning
       never reads as a brand element. */
    --success:     #1E8E4F;
    --success-bg:  #E8F5EE;
    --warning:     #B7791F;
    --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 charcoal rather than
       pure black, so they sit in the same family. */
    --shadow-sm: 0 1px 3px rgba(43, 48, 52, 0.08);
    --shadow-md: 0 4px 16px rgba(43, 48, 52, 0.10);
    --shadow-lg: 0 10px 34px rgba(43, 48, 52, 0.13);
    --shadow-brand: 0 6px 18px rgba(245, 109, 31, 0.28);

    /* ── Gradients ─────────────────────────────── */
    --grad-brand: linear-gradient(135deg, #F98440 0%, #F56D1F 50%, #DE5C12 100%);
    --grad-dark:  linear-gradient(135deg, #2B3034 0%, #363B40 60%, #1D2124 100%);
    --grad-hero:  linear-gradient(135deg, #2B3034 0%, #363B40 45%, #C2540F 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;
}