/* Staygood designtokens. Enda stället i temat där färgkoder får finnas. */
:root {
	/* Färger */
	--sg-svart: #000000;
	--sg-vit: #FFFFFF;
	--sg-rosa: #F5C9DA;
	--sg-ljusrosa: #FCE4EE;
	--sg-bla: #0E01F5;
	--sg-bla-hover: #0A00C2;
	--sg-gra-text: #555555;
	--sg-ljusgra: #F4F4F4;
	--sg-ljusgra-2: #F7F7F7;
	--sg-linje: #E6E6E6;
	--sg-linje-ljus: #EEEEEE;
	--sg-rand: #ECECEC;
	--sg-ram: #D4D4D4;
	--sg-ram-mork: #999999;
	--sg-ram-kontrast: #767676;
	--sg-fel: #B3261E;
	--sg-ok: #3F6B4F;
	--sg-ok-text: #2F6B3A;
	--sg-header-bg: rgba(255, 255, 255, 0.96);
	--sg-badge-count: rgba(253, 252, 250, 0.2);
	--sg-overlay: rgba(23, 23, 23, 0.35);
	--sg-swatch-ram: rgba(23, 23, 23, 0.12);
	--sg-ruta-ram: rgba(0, 0, 0, 0.15);
	--sg-kontur-hover: rgba(0, 0, 0, 0.06);

	/* Smakfärger */
	--sg-ss-banan: #F2D77E;
	--sg-ss-choklad: #6B4A3A;
	--sg-ss-mint: #8CC7B0;
	--sg-ss-paron: #C9D27A;
	--sg-ss-jordgubb: #E06C7A;
	--sg-ss-appelpaj: #D4A04E;
	--sg-ss-chai: #A9785A;
	--sg-kreatin-pink: #F2A7B8;
	--sg-kreatin-cola: #5A3A2E;
	--sg-kreatin-naturell: #F4EFE6;

	/* Typsnitt */
	--sg-font: "DM Sans", Helvetica, Arial, sans-serif;
	--sg-mono: "DM Mono", ui-monospace, monospace;

	/* Textstorlekar */
	--sg-fs-12: 12px; --sg-fs-13: 13px; --sg-fs-14: 14px; --sg-fs-15: 15px; --sg-fs-16: 16px;
	--sg-fs-17: 17px; --sg-fs-18: 18px; --sg-fs-19: 19px; --sg-fs-20: 20px; --sg-fs-22: 22px;
	--sg-fs-28: 28px; --sg-fs-30: 30px; --sg-fs-44: 44px;
	--sg-fs-body: 16px;      /* 15 px från 768 px */
	--sg-fs-foot: 16px;      /* 14 px från 768 px */
	--sg-h2-section: clamp(26px, 3.1vw, 36px);
	--sg-h2-category: clamp(30px, 3.6vw, 46px);
	--sg-h2-hero: clamp(32px, 4.6vw, 56px);
	--sg-h2-instagram: clamp(30px, 4vw, 52px);
	--sg-h2-faq: clamp(24px, 3vw, 32px);
	--sg-h2-small: clamp(22px, 2.5vw, 30px);
	--sg-h2-catcopy: clamp(20px, 2.2vw, 26px);

	/* Avstånd */
	--sg-max: 1240px;
	--sg-gutter: 24px;

	/* Radier */
	--sg-r-2: 2px;
	--sg-r-4: 4px;
	--sg-r-round: 999px;

	/* Skuggor */
	--sg-shadow-cookie: 0 18px 48px rgba(42, 31, 36, 0.18);
	--sg-shadow-dropdown: 0 14px 36px rgba(42, 31, 36, 0.16);

	/* Lager */
	--sg-z-header: 40;
	--sg-z-buybar: 50;
	--sg-z-cart: 60;
	--sg-z-cookie: 70;
	--sg-z-mobilenav: 80;

	/* Platshållare */
	--sg-stripe: repeating-linear-gradient(135deg, var(--sg-rand) 0 10px, var(--sg-ljusgra) 10px 20px);
	--sg-stripe-lg: repeating-linear-gradient(135deg, var(--sg-rand) 0 12px, var(--sg-ljusgra) 12px 24px);

	/* Tryckyta */
	--sg-tap: 44px;
}
@media (min-width: 768px) {
	:root { --sg-fs-body: 15px; --sg-fs-foot: 14px; }
}
@media (min-width: 1024px) {
	:root { --sg-tap: 24px; }
}