/*
==============================================
DESIGN TOKENS - Aus Figma exportiert
==============================================
Hier fügst du die exportierten Figma-Tokens ein!

WORKFLOW:
1. Figma → Plugin "Design Tokens" → Export as CSS
2. CSS-Variablen hier einfügen
3. Fertig - alle Werte sind zentral verfügbar!
==============================================
*/

:root {
	/* ============================================
	   FARBEN - aus Figma
	   ========================================== */
	
	/* Primary Colors */
	--color-primary: #D1B283;           /* Primärfarbe - ANPASSEN! */
	--color-primary-hover: #D1B283;     /* Hover-State - ANPASSEN! */
	--color-primary-light: #D1B283;     /* Light-Variante - ANPASSEN! */
	
	/* Secondary Colors */
	--color-secondary: #91221C;         /* Sekundärfarbe - ANPASSEN! */
	--color-secondary-hover: #91221C;   /* Hover-State - ANPASSEN! */
	
	/* Text Colors */
	--color-text: #000000;              /* Haupttext - ANPASSEN! */
	--color-text-light: #000000;        /* Light Text - ANPASSEN! */
	--color-text-muted: #000000;        /* Muted Text - ANPASSEN! */
	
	/* Background Colors */
	--color-background: #ffffff;        /* Haupthintergrund - ANPASSEN! */
	--color-background-alt: #f9fafb;    /* Alt. Hintergrund - ANPASSEN! */
	
	/* Accent & Utility */
	--color-accent: #D1B283;            /* Akzentfarbe - ANPASSEN! */
	--color-success: #91221C;           /* Success - ANPASSEN! */
	--color-warning: #D1B283;           /* Warning - ANPASSEN! */
	--color-error: #91221C;             /* Error - ANPASSEN! */
	
	
	/* ============================================
	   TYPOGRAFIE - aus Figma
	   ========================================== */
	
	/* Font Families */
	--font-primary: Lato,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading:  "Londrina Solid", sans-serif;
	
	/* Heading Sizes - Mobile First (Default) */
	--font-h1-size: 33px;
	--font-h1-line-height: 126%;
	--font-h1-weight: 400;

	--font-h2-size: 32px;
	--font-h2-line-height: 126%;
	--font-h2-weight: 400;

	--font-h3-size: 26px;
	--font-h3-line-height: 126%;
	--font-h3-weight: 400;

	--font-h4-size: 22px;
	--font-h4-line-height: 126%;
	--font-h4-weight: 400;

	--font-h5-size: 18px;
	--font-h5-line-height: 1.5;
	--font-h5-weight: 600;

	--font-h6-size: 16px;
	--font-h6-line-height: 1.5;
	--font-h6-weight: 600;

	/* Body Text */
	--font-body-size: 16px;
	--font-body-line-height: 155%;
	--font-body-weight: 400;
	--letter-spacing: 0.02em;

	/* Small Text */
	--font-small-size: 13px;
	--font-small-line-height: 1.5;


	/* ============================================
	   NAVIGATION - aus Figma
	   ========================================== */

	/* Navigation Font Sizes - Mobile First */
	--nav-font-size: 20px;
	--nav-line-height: 140%;
	--nav-letter-spacing: 0.03em;
	--nav-font-weight: 400;

	/* Navigation Colors */
	--nav-text-color: #000000;           /* Standard: Schwarz */
	--nav-text-active: var(--color-secondary);  /* Active: Rot */
	--nav-text-hover: #ffffff;           /* Hover: Weiß */
	--nav-bg-hover: var(--color-secondary);     /* Hover BG: Rot */


	/* ============================================
	   SPACING SYSTEM - aus Figma
	   ========================================== */
	
	--spacing-xs: 8px;                  /* ANPASSEN! */
	--spacing-s: 16px;                  /* ANPASSEN! */
	--spacing-m: 24px;                  /* ANPASSEN! */
	--spacing-l: 32px;                  /* ANPASSEN! */
	--spacing-xl: 48px;                 /* ANPASSEN! */
	--spacing-xxl: 64px;                /* ANPASSEN! */
	--spacing-xxxl: 96px;               /* ANPASSEN! */
	
	
	/* ============================================
	   LAYOUT - aus Figma
	   ========================================== */
	
	--container-width: 1200px;          /* ANPASSEN! */
	--container-width-narrow: 800px;    /* Schmale Container - ANPASSEN! */
	--container-width-wide: 1400px;     /* Breite Container - ANPASSEN! */
	
	
	/* ============================================
	   BUTTONS - aus Figma
	   ========================================== */
	
	--button-padding-x: 5px;           /* ANPASSEN! */
	--button-padding-y: 5px;           /* ANPASSEN! */
	--button-border-radius: 0px;        /* ANPASSEN! */
	--button-font-size: 16px;           /* ANPASSEN! */
	--button-font-weight: 400;          /* ANPASSEN! */
	
	
	/* ============================================
	   BORDERS & SHADOWS - aus Figma
	   ========================================== */
	
	--border-radius-sm: 0px;
	--border-radius-md: 0px;
	--border-radius-lg: 0px;
	
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);           /* ANPASSEN! */
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);         /* ANPASSEN! */
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);       /* ANPASSEN! */
	
	
	/* ============================================
	   BREAKPOINTS - Standard
	   ========================================== */
	
	--breakpoint-mobile: 768px;
	--breakpoint-tablet: 1024px;
	--breakpoint-desktop: 1200px;
}


/* ============================================
   TABLET BREAKPOINT - ab 768px
   ========================================== */

@media (min-width: 768px) {
	:root {
		/* Heading Sizes - Tablet */
		--font-h1-size: 48px;
		--font-h2-size: 34px;
		--font-h3-size: 30px;
		--font-h4-size: 24px;

		/* Body Text - Tablet */
		--font-body-size: 18px;
		--font-small-size: 14px;
	}
}


/* ============================================
   DESKTOP BREAKPOINT - ab 1024px
   ========================================== */

@media (min-width: 1024px) {
	:root {
		/* Heading Sizes - Desktop */
		--font-h1-size: 50px;
		--font-h2-size: 40px;
		--font-h3-size: 34px;
		--font-h4-size: 24px;

		/* Body Text - Desktop */
		--font-body-size: 20px;
		--font-small-size: 15px;

		/* Navigation - Desktop */
		--nav-font-size: 24px;

		/* Spacing - Desktop */
		--spacing-xl: 48px;
		--spacing-xxl: 64px;
		--spacing-xxxl: 96px;
	}
}