/* ==========================================================================
   Speedparts storefront tokens (design E1)
   Every colour, size, radius and timing used by the sp/ stylesheets lives here.
   A view or page stylesheet never introduces a new hex value or font-size.
   ========================================================================== */

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/figtree-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/barlow-semi-condensed-600-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/barlow-semi-condensed-700-latin.woff2') format('woff2');
}

:root {
    /* Surfaces and ink */
    --sp-paper:       #ffffff;
    --sp-surface:     #f4f4f1;
    --sp-surface-2:   #eceeea;
    --sp-ink:         #1d1c1a;
    --sp-ink-soft:    #5d5950;
    --sp-ink-faint:   #928c80;
    --sp-line:        #e6e5e0;
    --sp-line-strong: #cbd4cc;

    /* Brand green, tonal ramp light to dark */
    --sp-t1:          #e4eeeb;
    --sp-t2:          #c3d9d3;
    --sp-t3:          #2e6a62;
    --sp-t4:          #1c3f3b;
    --sp-header:      #1c3f3b;
    --sp-header-deep: #153230;
    --sp-brand:       #132525;

    /* Action: the only green on interactive elements */
    --sp-action:       #145248;
    --sp-action-hover: #0f433b;
    /* Pay buttons in the checkout share Kustom's button colour (KustomService options.color_button) */
    --sp-pay:          #0f6470;
    --sp-pay-hover:    #0b525c;
    --sp-focus:        #669d94;

    /* Status. Fit and stock are always said in words too, never by colour alone. */
    --sp-ok:          #2e6a62;
    --sp-ok-bg:       #e4eeeb;
    --sp-warn:        #8a5a00;
    --sp-warn-bg:     #fbf1dc;
    --sp-bad:         #9c392d;
    --sp-bad-bg:      #f8e7e3;
    --sp-muted-bg:    #eceeea;

    /* Registration plate */
    --sp-plate-blue:  #003399;
    --sp-plate-star:  #ffcc00;
    --sp-plate-ink:   #111111;

    /* Exploded diagram plate: the catalogue raster's own petrol blue */
    --sp-diagram-edge: #07677b;
    --sp-diagram-bg:   #004d63;
    --sp-diagram-deep: #004255;

    /* Overlays */
    --sp-scrim:       rgba(20, 36, 33, .55);
    --sp-on-dark:     rgba(255, 255, 255, .82);
    --sp-on-dark-dim: rgba(255, 255, 255, .6);
    --sp-on-dark-hit: rgba(255, 255, 255, .1);
    --sp-on-dark-line:rgba(255, 255, 255, .14);

    /* Type */
    --sp-font:        'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sp-font-plate:  'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
    --sp-fs-xs:       12px;
    --sp-fs-sm:       13.5px;
    --sp-fs-ui:       14.5px;
    --sp-fs-body:     15.5px;
    --sp-fs-lg:       17px;
    --sp-fs-h3:       19px;
    --sp-fs-h2:       clamp(24px, 2.8vw, 34px);
    --sp-fs-h1:       clamp(30px, 3.6vw, 46px);
    --sp-fs-display:  clamp(32px, 3.8vw, 54px);
    --sp-lh-body:     1.55;
    --sp-track-tight: -0.03em;

    /* Shape */
    --sp-r-xl:        24px;
    --sp-r-card:      18px;
    --sp-r-tile:      16px;
    --sp-r-ctl:       14px;
    --sp-r-sm:        9px;
    --sp-r-pill:      999px;

    /* Layout */
    --sp-max:         1440px;
    --sp-gutter:      16px;
    --sp-gap:         10px;
    --sp-section:     48px;
    --sp-hit:         44px;

    /* Motion */
    --sp-ease:        cubic-bezier(.22, 1, .36, 1);
    --sp-ease-open:   cubic-bezier(.2, .7, .2, 1);
    --sp-fast:        150ms;
    --sp-open:        220ms;
    --sp-slow:        600ms;

    --sp-shadow-pop:  0 20px 90px rgba(19, 37, 37, .2);
}

@media (min-width: 768px) {
    :root {
        --sp-gutter:  40px;
        --sp-gap:     14px;
        --sp-section: 72px;
    }
}