/* ==========================================================================
   Svenska Barr — Design tokens
   Enda sanningen för färg, typografi, rum, radie och skugga.
   Används av Svenska Barr och (med annan brand-ramp) av Woff.se.
   Ändra ALDRIG ett värde direkt i en komponent — ändra token här.
   ========================================================================== */

:root {
  /* --- Brand ramps: de tio givna färgerna, satta i skala ---------------- */
  --barr-green-900: #1c2620;   /* härledd: djupaste grön, för text på ljus grön */
  --barr-green-800: #2d3a2e;   /* GIVEN — primär mörk grön: nav, footer, mörka ytor */
  --barr-green-600: #4a6b50;   /* härledd: mellansteg, ikoner och hover på mörkt */
  --barr-green-500: #7ca982;   /* GIVEN — signalgrön: lagerstatus, bekräftelse */
  --barr-green-300: #b3d1b6;   /* härledd: mjuka fyllningar */
  --barr-green-100: #e0eec6;   /* GIVEN — ljusgrön: tinta ytor, tags, highlights */

  --barr-ochre-800: #8f4f16;   /* härledd: pressat läge, text på ljus ockra */
  --barr-ochre-700: #bf6b1e;   /* GIVEN — mörk ockra: hover på primärknapp */
  --barr-ochre-500: #d97b1a;   /* GIVEN — PRIMÄR ACTION. Endast köp/nästa steg. */
  --barr-gold-500:  #d09500;   /* GIVEN — guld: betyg, utmärkelser, sällan */
  --barr-ochre-200: #f0b87f;   /* GIVEN — ljus ockra: tinta ytor på mörk grön */
  --barr-ochre-100: #fbeadb;   /* härledd: valt/aktivt fält, mjukast */

  --barr-ink-900: #1b1b1b;     /* GIVEN — rubriker, hög kontrast */
  --barr-ink-700: #303030;     /* GIVEN — brödtext */
  --barr-ink-500: #6b6b66;     /* härledd: sekundär text, hjälptext */
  --barr-ink-300: #a3a29c;     /* härledd: inaktiv text, platshållare */

  --barr-sand-100: #f5efe6;    /* GIVEN — sidbakgrund, varm grund */
  --barr-sand-200: #ebe3d6;    /* härledd: tintad panel, quizblock */
  --barr-sand-300: #ddd3c2;    /* härledd: kantlinjer och avdelare */
  --barr-paper:    #fffdf9;    /* härledd: kortyta, ljusast */

  /* --- Semantiska roller: använd DESSA i komponenter, inte ramperna ----- */
  --color-bg:            var(--barr-sand-100);
  --color-surface:       var(--barr-paper);
  --color-surface-tint:  var(--barr-sand-200);
  --color-surface-dark:  var(--barr-green-800);
  --color-border:        var(--barr-sand-300);
  --color-border-strong: var(--barr-green-800);

  --color-text:          var(--barr-ink-900);
  --color-text-body:     var(--barr-ink-700);
  --color-text-muted:    var(--barr-ink-500);
  --color-text-invert:   #f4f1e8;

  --color-brand:         var(--barr-green-800);
  --color-action:        var(--barr-ochre-500);
  --color-action-hover:  var(--barr-ochre-700);
  --color-action-press:  var(--barr-ochre-800);
  --color-action-tint:   var(--barr-ochre-100);
  --color-action-text:   #fffdf9;

  --color-instock:       var(--barr-green-500);
  --color-instock-text:  #2f5c37;
  --color-instock-tint:  var(--barr-green-100);
  --color-rating:        var(--barr-gold-500);
  --color-warn:          var(--barr-ochre-700);

  --color-focus:         var(--barr-ochre-500);

  /* --- Typografi -------------------------------------------------------- */
  --font-display: 'Newsreader', Georgia, serif;   /* rubriker, citat, priser i display */
  --font-body:    'DM Sans', system-ui, sans-serif;

  --text-hero:    clamp(40px, 4.6vw, 66px);  /* 1.05 lh, -0.022em */
  --text-h1:      clamp(34px, 3.2vw, 46px);
  --text-h2:      clamp(28px, 2.6vw, 38px);
  --text-h3:      25px;
  --text-h4:      20px;
  --text-lead:    17.5px;
  --text-body:    15.5px;
  --text-sm:      13.5px;
  --text-xs:      12.5px;
  --text-label:   11px;   /* + letter-spacing .18em, uppercase, 700 */

  --lh-tight: 1.08;
  --lh-head:  1.15;
  --lh-body:  1.62;

  /* --- Rum: 4px-bas ---------------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --gutter: var(--space-5);          /* mellan kort i ett rutnät */
  --section-gap: var(--space-16);    /* mellan sektioner */
  --page-pad: 34px;
  --page-max: 1340px;

  /* --- Radie ------------------------------------------------------------ */
  --radius-sm:  6px;    /* taggar, små fält */
  --radius-md:  8px;    /* knappar, inputs */
  --radius-lg:  12px;   /* inre paneler */
  --radius-xl:  16px;   /* kort */
  --radius-2xl: 18px;   /* stora sektionsblock */
  --radius-pill: 999px;

  /* --- Skugga: varma, aldrig blå ---------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(45, 58, 46, 0.06);
  --shadow-md: 0 3px 16px rgba(45, 58, 46, 0.09);
  --shadow-lg: 0 10px 34px rgba(45, 58, 46, 0.16);
  --shadow-action: 0 6px 20px rgba(217, 123, 26, 0.26);

  --duration: 0.16s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Logotyp: ALLTID inline SVG --------------------------------------------
   Märkena är rena paths med fill="currentColor". De ska renderas INLINE i
   dokumentet — då ärver de color från sin container och kan färgas med vilken
   token som helst.

     <span style="width:270px;color:var(--color-brand)">…inline <svg>…</span>

   Aldrig <img src="logo.svg">  — färgstyrningen går förlorad.
   Aldrig CSS mask-image     — masken laddas cross-origin i förhandsvisning
                               och elementet renderas omaskat som en fylld yta.

   I WordPress-temat: läs in filen med file_get_contents() och echo:a den,
   eller använd wp_get_attachment_image med SVG-inlining. I DC-sammanhang:
   <dc-import name="BarrLogo" variant="simple"> och <dc-import name="BarrSeal">.

   Bredd sätts på containern; märket är alltid width:100%, height:auto.
   -------------------------------------------------------------------------- */
.barr-logo { display: block; color: inherit; }
.barr-logo > svg { display: block; width: 100%; height: auto; }

/* --- Fokus: aldrig browserns blåa ring ------------------------------------ */
*:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}