/* ─── Fonts ───────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable-Italic.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ─── Global Fixes ────────────────────────────── */

html#snackys-tpl {
  overflow-x: clip;
}

/* ─── Design Tokens ───────────────────────────── */

:root {
  /* ─── Typography – Families ──────────────────── */
  --sd-font-body:      'Inter', system-ui, sans-serif;
  --sd-font-heading:   'Inter', system-ui, sans-serif;

  /* ─── Typography – Scale (Desktop) ───────────── */
  --sd-text-xs:   0.75rem;    /*  12px */
  --sd-text-sm:   0.875rem;   /*  14px */
  --sd-text-base: 1rem;       /*  16px */
  --sd-text-md:   1.125rem;   /*  18px */
  --sd-text-lg:   1.25rem;    /*  20px */

  --sd-h6: 1rem;              /*  16px */
  --sd-h5: 1.125rem;          /*  18px */
  --sd-h4: 1.375rem;          /*  22px */
  --sd-h3: 1.75rem;           /*  28px */
  --sd-h2: 2.25rem;           /*  36px */
  --sd-h1: 3rem;              /*  48px */

  /* ─── Typography – Line Heights ──────────────── */
  --sd-leading-tight:  1.15;
  --sd-leading-snug:   1.3;
  --sd-leading-normal: 1.5;
  --sd-leading-loose:  1.65;

  /* ─── Typography – Letter Spacing ────────────── */
  --sd-tracking-tight:  -0.02em;
  --sd-tracking-wide:    0.04em;

  /* ─── Typography – Heading Defaults ──────────── */
  --sd-heading-font-weight: 700;
  --sd-heading-line-height: var(--sd-leading-tight) !important;
  --sd-heading-letter-spacing: var(--sd-tracking-tight) !important;
  --sd-heading-margin-bottom: 0.875rem; /* 14px */

  /* ─── Radius ──────────────────────────────────── */
  --sd-radius-base: 0.25rem;
  --sd-radius-pill: 999px;

  /* ─── Colors – Brand ──────────────────────────── */
  --sd-primary:      #B02812;
  --sd-primary-dark: #7a1b12;   /* hover / active states */

  /* ─── Colors – Text ───────────────────────────── */
  --sd-text:         #000000;
  --sd-text-soft:    #131313;   /* near-black body copy  */
  --sd-text-inverse: #ffffff;
  --sd-muted:        #4B5563;
  --sd-muted-alt:    #5f5f5f;   /* captions, meta        */

  /* ─── Colors – UI ─────────────────────────────── */
  --sd-success:      #9EC23D;   /* savings / discount (PLP)  */
  --sd-success-alt:  #4caf50;   /* discount % (Blaze cards)  */
  --sd-badge-sale:   #ef4444;   /* Saving-Badge (Blaze)      */
  --sd-pitch:        #1b6b3a;   /* football-shipping pitch   */
  --sd-pitch-deep:   #0a3b1f;   /* football-shipping bottom  */

  /* ─── Colors – Text (Blaze Cards) ─────────────── */
  --sd-text-heading: #111827;   /* card title                */
  --sd-text-light:   #9ca3af;   /* brand line, old price     */
  --sd-text-body:    #6b7280;   /* card subtitle             */

  /* ─── Border ──────────────────────────────────── */
  --sd-border:       #000000;
  --sd-border-light: #6a6a6a;   /* cards, chips, filters */
  --sd-border-subtle:#ececef;   /* panel dividers        */
  --sd-border-faint: #eeeeee;   /* hairlines             */
  --sd-border-thick: 2px;
  --sd-border-slim:  1px;

  /* ─── Backgrounds ─────────────────────────────── */
  --sd-bg-light:  #f4f4f4;      /* filter pills, sidebar */
  --sd-bg-subtle: #f2f2f2;      /* active filter item    */

  /* ─── Disabled ────────────────────────────────── */
  --sd-disabled-bg:   #E5E7EB;
  --sd-disabled-text: #6B7280;

  /* ─── Shadow ──────────────────────────────────── */
  --sd-shadow:        0 6px 18px rgba(0,0,0,.12);
  --sd-shadow-card:   5px 5px 5px rgba(0,0,0,.09);
  --sd-shadow-blaze:  0 18px 40px rgba(15,23,42,.12); /* Blaze card       */
  --sd-shadow-badge:  0 10px 20px rgba(0,0,0,.18);    /* saving-badge      */
  --sd-shadow-overlay:0 4px 16px rgba(0,0,0,.08);     /* product img exp   */
  --sd-shadow-hover:  0 0 5px rgba(0,0,0,.3);
  --sd-shadow-strong: 0 0 6px rgba(0,0,0,.5);

  /* ─── Focus Ring ──────────────────────────────── */
  --sd-focus: 0 0 0 3px rgba(176,40,18,.25);

  /* ─── Buttons ─────────────────────────────────── */
  --sd-btn-height:      48px;
  --sd-btn-pad-x:       1.25rem;
  --sd-btn-font-weight: 700;

  /* ─── Transitions ─────────────────────────────── */
  --sd-transition-base: transform .1s ease, background-color .2s ease,
                        filter .2s ease, box-shadow .2s ease;

  /* ─── Off-Canvas ──────────────────────────────── */
  --sd-oc-width:   min(460px, 100vw);
  --sd-oc-overlay: rgba(0,0,0,.35);
}

/* ─── Typography – Base ───────────────────────── */

body {
  font-family: var(--sd-font-body);
  font-size: var(--sd-text-base);
  line-height: var(--sd-leading-normal);
  color: var(--sd-text-soft);
}

/* ─── Typography – Headlines ──────────────────── */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--sd-font-heading);
  font-weight: var(--sd-heading-font-weight);
  line-height: var(--sd-heading-line-height);
  letter-spacing: var(--sd-heading-letter-spacing) !important;
  color: var(--sd-text);
  margin: 0 0 var(--sd-heading-margin-bottom);
}

h1,
.h1 {
  font-size: var(--sd-h1);
}

h2,
.h2 {
  font-size: var(--sd-h2);
}

h3,
.h3 {
  font-size: var(--sd-h3);
}

h4,
.h4 {
  font-size: var(--sd-h4);
}

h5,
.h5 {
  font-size: var(--sd-h5);
}

h6,
.h6 {
  font-size: var(--sd-h6);
}

/* ─── Typography – Laptop ─────────────────────── */

@media (max-width: 1400px) {
  :root {
    --sd-h1: 2.625rem;   /* 42px */
    --sd-h2: 2rem;       /* 32px */
    --sd-h3: 1.625rem;   /* 26px */
    --sd-h4: 1.25rem;    /* 20px */
    --sd-h5: 1.0625rem;  /* 17px */
    --sd-h6: 1rem;       /* 16px */
  }
}

/* ─── Typography – Tablet ─────────────────────── */

@media (max-width: 992px) {
  :root {
    --sd-h1: 2.125rem;   /* 34px */
    --sd-h2: 1.75rem;    /* 28px */
    --sd-h3: 1.4375rem;  /* 23px */
    --sd-h4: 1.1875rem;  /* 19px */
    --sd-h5: 1.0625rem;  /* 17px */
    --sd-h6: 1rem;       /* 16px */

    --sd-heading-margin-bottom: 0.75rem;
  }
}

/* ─── Typography – Mobile ─────────────────────── */

@media (max-width: 500px) {
  :root {
    --sd-h1: 1.75rem;    /* 28px */
    --sd-h2: 1.5rem;     /* 24px */
    --sd-h3: 1.25rem;    /* 20px */
    --sd-h4: 1.125rem;   /* 18px */
    --sd-h5: 1rem;       /* 16px */
    --sd-h6: 0.9375rem;  /* 15px */

    --sd-heading-line-height: var(--sd-leading-snug);
    --sd-heading-margin-bottom: 0.625rem;
  }
}