:root {
	/* === PÄIVITYS 2025-11-04: DFS AB -inspiroitu design === */

	/* Taustavärit */
	--color-background: #F5F7FA;  /* Oletus taustaväri */
	--color-background-0: #ffffff;
	--color-background-1: #F5F7FA;  /* Vaalea tausta */
	--color-background-dark: #0A2E4A;  /* Tumma merensininen tausta */

	/* Päävärit - Marine/Veneilyteemat */
	--color-primary: #1C2E49;  /* Tummansininen - Päätaustaväri, tekstit */
	--color-secondary: #0077BE;  /* Kirkassininen - Linkit, aksentit */
	--color-tertiary: #4A9FD8;  /* Vaaleansininen - Sekundaariset elementit */

	/* Tuotekategorioiden värit */
	--color-category-lvi: #007C8C;  /* LVI-Marine (putkitus) - Turkoosi */
	--color-category-electric: #F57C00;  /* Sähkö/Elektroniikka - Oranssi */
	--color-category-navigation: #1976D2;  /* Navigointi/GPS - Sininen */
	--color-category-lighting: #FBC02D;  /* Valaistus - Keltainen */
	--color-category-plastic: #689F38;  /* Muoviosat - Vihreä */
	--color-category-metal: #616161;  /* Kiinnitys/Teräs - Harmaa */

	/* Kategoria-värit numeromuodossa (kortteja varten) */
	--color-category-1: #4A9FD8;  /* Turkoosi */
	--color-category-2: #FF6B35;  /* Oranssi */
	--color-category-3: #0077BE;  /* Sininen */
	--color-category-4: #4CAF50;  /* Vihreä */
	--color-category-5: #9C27B0;  /* Violetti */
	--color-category-6: #F44336;  /* Punainen */

	/* Käyttöliittymävärit */
	--color-error: #D32F2F;  /* Virhe */
	--color-success: #4CAF50;  /* Onnistuminen */
	--color-warning: #F57C00;  /* Varoitus */

	/* Perusvärit */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-grey: #8299A0;  /* DFS AB harmaa */
	--color-light-grey: #BBBBBB;

	/* Tekstivärit */
	--color-text-primary: #1C2E49;  /* Tummansininen */
	--color-text-secondary: rgba(0, 0, 0, 0.75);
	--color-text-disabled: rgba(0, 0, 0, 0.25);
	--color-text-white: #ffffff;

	/* Typografia - DFS AB -inspiroitu */
	--font-size-default: 1rem;  /* 16px */
	--font-size-small: 0.875rem;  /* 14px - tagit/meta */
	--font-size-body: 1.125rem;  /* 18px - leipäteksti */

	--font-size-h1: 4rem;  /* 64px - Hero/Pääotsikko (desktop) */
	--font-size-h2: 2rem;  /* 32px - Osiot */
	--font-size-h3: 1.75rem;  /* 28px - Alaosiot */
	--font-size-h4: 1.5rem;  /* 24px - Kategoriat/Kortit */
	--font-size-h5: 1.25rem;  /* 20px */
	--font-size-h6: 1rem;  /* 16px */

	/* Font weights */
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Välit ja paddingt */
	--padding-small: 8px;
	--padding-default: 16px;
	--padding-large: 32px;
	--padding-xlarge: 80px;  /* Osioiden padding */

	--gap-small: 16px;
	--gap-default: 24px;
	--gap-large: 32px;

	/* Border-radius - DFS AB pyöristetyt kulmat */
	--border-radius-card: 20px;  /* Kortit */
	--border-radius-button: 8px;  /* Painikkeet */
	--border-radius-default: 15px;
	--border-radius-small: 10px;

	/* Varjot */
	--box-shadow-default: 0 4px 12px rgba(0, 0, 0, 0.1);
	--box-shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.15);
	--box-shadow-button: 0 6px 16px rgba(0, 119, 190, 0.3);

	/* Siirtymät */
	--transition-default: all 0.3s ease;
	--transition-fast: all 0.2s ease;

	/* Container max-width */
	--container-max-width: 1400px;
	--container-large: 1600px;

	/* Breakpoints */
	--breakpoint-xs: 375px;   /* Mobile */
	--breakpoint-sm: 576px;   /* Small mobile */
	--breakpoint-md: 768px;   /* Tablet */
	--breakpoint-lg: 1024px;  /* Desktop */
	--breakpoint-xl: 1400px;  /* Large desktop */
	--breakpoint-xxl: 1920px; /* Extra large */
}

@media (prefers-color-scheme: dark) {}