/* ==========================================================================
   DESIGNTOKENS – butikens hela utseende på ETT ställe
   Laddas allra först (handtag sfx-tokens), före temats site.css.
   Ny nisch = byt värdena här. Inga andra CSS-filer ska innehålla färger,
   radier eller typografiska grundvärden; de läser härifrån via var(--…).

   OBS Anpassa: temat skriver efter site.css ut
     :root{--sf-primary; --sf-brand-primary; --sf-hero-cta; --sf-hero-overlay}
   från Utseende → Anpassa. De fyra värdena här nedan är därför bara
   standardvärden – det som står i Anpassa vinner. Byt dem på båda ställena.
   ========================================================================== */
:root{
  /* --- 1. Varumärkesfärger ------------------------------------------------ */
  --sf-primary:#082650;                       /* primärfärg: rubriker, länkar, fyllda knappar, sidfot (Anpassa) */
  --sf-brand-primary:var(--sf-primary);       /* samma färg i sidhuvudet (Anpassa skriver över) */
  --sf-hover:#163c6c;                         /* textlänkar vid hovring */
  --sf-color-primary-hover:#1d5496;           /* fyllda knappar vid hovring, fokusring */
  --sf-color-primary-active:#061c3b;          /* fyllda knappar när de trycks ned */
  --sf-hero-cta:#cf4716;                      /* accent/CTA (Anpassa: "hero-knappens färg") */
  --sf-color-accent:var(--sf-hero-cta);       /* accent överallt utanför hero: märken, markeringar, streck */
  --sf-color-accent-hover:#b03c11;            /* accentknapp vid hovring + accentfärgad text (6:1 mot vitt) */
  --sf-color-accent-strong:#a8380f;           /* accenttext på ljus accentyta (mängdrabatt) */
  --sf-color-accent-soft:#fdece5;             /* ljus accentyta bakom rabattetikett */
  --sf-hero-overlay:.8;                       /* täckning av primärfärg över hero-bilden (Anpassa) */

  /* --- 2. Textfärger ------------------------------------------------------ */
  --sf-ink:#263241;                           /* brödtext */
  --sf-muted:#697586;                         /* dämpad text: ingresser, ögonbryn, hjälptexter */
  --sf-muted-strong:#5b6577;                  /* utdrag i guidekort */
  --sf-color-text-soft:#7b8598;               /* underrader i kort, sökikon */
  --sf-color-text-subtle:#8a93a3;             /* metadata, "Från", platshållare i sök */
  --sf-color-text-faint:#9aa3b2;              /* styckpris */
  --sf-color-icon-faint:#aab3c0;              /* pilar i megamenyns flikar */
  --sf-on-primary:#fff;                       /* text och ikoner på primärfärgad yta */
  --sf-on-accent:#fff;                        /* text på accentfärgad yta */
  --sf-on-primary-muted:#dfe6f1;              /* brödtext och länkar i sidfoten */

  /* --- 3. Ytor ------------------------------------------------------------ */
  --sf-bg:#fff;                               /* sidans och kortens bakgrund */
  --sf-surface:#f5f7fa;                       /* tonade block, hovrade rader, notisbotten, jämförelsetabellens första kolumn */
  --sf-surface-tint:#eff7fd;                  /* ljus primärtonad yta (äldre kort, ikonplattor) */
  --sf-surface-selected:#f4f7fc;              /* vald rad: mängdval, frakt- och betalsätt */
  --sf-surface-media:#f3f5f8;                 /* platta bakom miniatyrer i meny och sökförslag */
  --sf-surface-field:#f6f8fb;                 /* sökfältets botten, aktivt antalskort */
  --sf-surface-track:#eef1f6;                 /* spår i betygsstaplar, stora stegsiffror */
  --sf-surface-faint:#fafbfc;                 /* jämförelsetabellens radrubriker */
  --sf-surface-warm:#fbfaf6;                  /* jämförelsetabellens andra kolumn */
  --sf-color-overlay:rgba(10,24,45,.55);      /* mörk ridå bakom direktsök */

  /* --- 4. Linjer ---------------------------------------------------------- */
  --sf-line:#dce2e9;                          /* standardkant och avdelare */
  --sf-line-soft:#e6ebf2;                     /* kortkant på produkt- och guidekort, linjer i sidhuvud och megameny */
  --sf-line-field:#c3ccd8;                    /* fältkanter: mörkare än kortkanten så fälten syns */
  --sf-line-field-hover:#8f9bab;              /* fält och valbara rader vid hovring */
  --sf-line-control:#97a3b4;                  /* radioknappens ring */
  --sf-line-hover:#c3d0e4;                    /* kortkant vid hovring */
  --sf-card-hover-border:#9baec4;             /* kortkant vid hovring, äldre kort och WooCommerce-block */

  /* --- 5. Status ---------------------------------------------------------- */
  --sf-color-success:#087a4b;                 /* bekräftelse, i lager, besparing */
  --sf-color-success-bg:#f2f8f5;
  --sf-color-error:#b3261e;                   /* felmeddelanden */
  --sf-color-error-bg:#fdf4f3;
  /* gul varningsfärg finns inte i dag – varningsrutor använder accentfärgen */

  /* --- 6. Stjärnor -------------------------------------------------------- */
  --sf-color-star:#f5b301;                    /* stjärnor i produktkort */
  --sf-color-star-alt:#eab33e;                /* stjärnor i hero och betygsstaplar på produktsidan */
  --sf-color-star-off:#d5d9e0;                /* tom stjärna */
  --sf-color-star-off-dark:#6b7280;           /* tom stjärna på mörk hero-bild */

  /* --- 7. Typsnitt, vikter och storleksskala ------------------------------ */
  --sf-font:Inter,Arial,sans-serif;
  --sf-weight-body:400;
  --sf-weight-medium:500;
  --sf-weight-heading:600;
  --sf-weight-ui:600;                         /* knappar, menyer, etiketter */
  --sf-weight-bold:700;
  --sf-text-eyebrow:12px;                     /* ögonbryn (versal liten rad över rubrik) */
  --sf-tracking-eyebrow:.14em;
  --sf-text-body:17px;                        /* brödtext */
  --sf-text-body-mobile:16px;                 /* brödtext under 600 px */
  --sf-leading-body:1.75;
  --sf-text-h1:clamp(34px,4vw,48px);          /* sidrubrik på undersidor, butik, sök */
  --sf-text-h2:clamp(30px,3vw,40px);          /* sektionsrubrik */
  --sf-text-h2-content:clamp(26px,2.6vw,34px);/* H2 i löpande innehåll */
  --sf-text-h2-small:clamp(24px,2.4vw,32px);  /* mindre blockrubrik i butiksflödet */
  --sf-text-h3:21px;
  --sf-text-button:15px;

  /* --- 8. Radier ---------------------------------------------------------- */
  --sf-radius-tight:4px;                      /* fokusringar, minsta rundningen */
  --sf-radius-button:6px;                     /* temats knappar, menyposter */
  --sf-radius-field:8px;                      /* fält, små rutor, notisknappar */
  --sf-radius-control:10px;                   /* knappar och valrader i butiksflödet, notiser */
  --sf-radius-media:12px;                     /* bildytor, ikonplattor */
  --sf-radius-card:16px;                      /* kort, paneler och tonade block */
  --sf-radius-card-shop:18px;                 /* produkt- och guidekort */
  --sf-radius-pill:999px;                     /* piller: konturknapp, märken, sökfält */

  /* --- 9. Skuggor --------------------------------------------------------- */
  --sf-shadow-color:var(--sf-primary);        /* alla skuggor tonas av denna färg */
  --sf-card-hover-shadow:0 7px 20px -12px color-mix(in srgb,var(--sf-shadow-color) 31.372549%,transparent);

  /* --- 10. Avstånd och mått ----------------------------------------------- */
  --sf-section-space:56px;                    /* luft över och under sektioner */
  --sf-section-space-mobile:40px;             /* samma under 600 px */
  --sf-container:1240px;                      /* största sidbredd */
  --sf-container-content:1040px;              /* innehållssidor */
  --sf-container-text:720px;                  /* läsbar textspalt */
  --sf-touch-target:44px;                     /* minsta klickyta */
  --sf-control-height:48px;                   /* knappar och fält */
  --sf-button-height:52px;                    /* temats stora knappar */

  /* --- 11. Rörelse -------------------------------------------------------- */
  --sf-motion:160ms;                          /* hovring och fokus */
  --sf-card-motion:180ms;
  --sf-card-image-zoom:1.035;

  /* ==========================================================================
     BAKÅTKOMPATIBLA ALIAS – använd inte i ny kod. Finns kvar för att äldre
     regler, Anpassa-CSS och insticksprogram ska fortsätta fungera.
     ========================================================================== */
  --green:var(--sf-primary);
  --green-dark:var(--sf-primary);
  --green-hover:var(--sf-hover);
  --green-light:var(--sf-surface);
  --text:var(--sf-ink);
  --text-sec:var(--sf-muted);
  --text-ter:var(--sf-muted);
  --border:var(--sf-line);
  --border-light:var(--sf-line);
  --sfx-navy:var(--sf-primary);
  --sfx-navy-hover:var(--sf-color-primary-hover);
  --sfx-navy-active:var(--sf-color-primary-active);
  --sfx-focus:var(--sf-color-primary-hover);
  --sfx-accent:var(--sf-color-accent);
  --sfx-accent-hover:var(--sf-color-accent-hover);
  --sfx-surface:var(--sf-surface-tint);
  --sfx-motion:var(--sf-motion);
  --sfx-card-radius:7px;                      /* äldre kort (.sfx-card) – eget värde, saknar motsvarighet i skalan */
  --sfx-card-space:28px;
  --sfx-gap:24px;                             /* rutnätens mellanrum */
  --sfx-section-space:72px;                   /* används inte längre */
}