:root {
	/* Färger — VA Grossisten grafisk profil */
	--color-primary:       #ED6A2F;   /* Orange – primär */
	--color-primary-dark:  #c4521f;
	--color-primary-light: #f4844f;
	--color-primary-50:    #fef1ea;
	--color-secondary:     #466C70;   /* Mörk teal */
	--color-secondary-dark:#344f52;
	--color-accent:        #44C8E4;   /* Cyan accent */
	--color-accent-dark:   #2aa8c6;
	--color-near-black:    #1E2020;   /* Nära-svart */
	--color-white:         #ffffff;
	--color-off-white:     #F2F2F0;   /* Benvit bakgrund */
	--color-black:         #1E2020;
	--color-gray-50:       #F2F2F0;
	--color-gray-100:      #E8E8E6;
	--color-gray-200:      #D8D8D6;
	--color-gray-300:      #BEBEBC;
	--color-gray-400:      #989896;
	--color-gray-500:      #787876;
	--color-gray-600:      #585856;
	--color-gray-700:      #383836;
	--color-gray-900:      #1E2020;
	--color-success:       #2e7d32;
	--color-success-bg:    #e8f5e9;
	--color-warning:       #e65100;
	--color-warning-bg:    #fff3e0;
	--color-danger:        #c62828;
	--color-danger-bg:     #ffebee;
	--color-error:         #c62828;
	--color-info:          #01579b;
	--color-info-bg:       #e3f2fd;

	/* Typsnitt */
	--font-heading: "new-order", sans-serif;
	--font-body:    "libre-franklin", sans-serif;

	/* Fontstorlekar — mobil default */
	--text-xs:   12px;
	--text-sm:   14px;
	--text-base: 16px;
	--text-lg:   18px;
	--text-xl:   22px;
	--text-2xl:  26px;
	--text-3xl:  32px;
	--text-4xl:  38px;
	--text-5xl:  45px;

	/* Radavstånd */
	--leading-tight:  1.2;
	--leading-normal: 1.5;
	--leading-loose:  1.8;

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

	/* Layout */
	--container-max:    1300px;
	--container-pad:    clamp(24px, 5vw, 80px);
	--sidebar-width:    260px;
	--header-height:    70px;

	/* Border */
	--radius-sm:   6px;
	--radius-md:   12px;
	--radius-lg:   20px;
	--radius-xl:   28px;
	--radius-pill: 999px;
	--border:      1px solid var(--color-gray-200);

	/* Skuggor */
	--shadow-sm: 0 1px 3px rgba(0,0,0,.08);
	--shadow-md: 0 4px 12px rgba(0,0,0,.10);
	--shadow-lg: 0 8px 24px rgba(0,0,0,.12);

	/* Transition */
	--transition: 0.2s ease;

	/* Z-index */
	--z-sidebar:   100;
	--z-header:    200;
	--z-offcanvas: 300;
	--z-overlay:   290;
	--z-modal:     400;
	--z-toast:     500;
}

/* Breakpoints (för referens i kommentarer):
   Mobil:       max 768px
   Surfplatta:  769px – 1099px
   Laptop:      1100px – 1512px
   Stor skärm:  1513px+
*/