/*
==============================================
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: #E53012;           /* Primärfarbe */
	--color-primary-hover: #c4280f;     /* Hover-State */
	--color-primary-light: #f5d0ca;     /* Light-Variante */
	
	/* Secondary Colors */
	--color-secondary: #EE7202;         /* Sekundärfarbe */
	--color-secondary-hover: #d66502;   /* Hover-State */
	
	/* Text Colors */
	--color-text: #000000;              /* Haupttext - ganz schwarz */
	--color-text-light: #333333;        /* Light Text */
	--color-text-muted: #666666;        /* Muted Text */
	
	/* Background Colors */
	--color-background: #B7AC99;        /* Haupthintergrund */
	--color-background-alt: #a89d8a;    /* Alt. Hintergrund */
	--color-background-dark: #222222;    /* Dark Hintergrund */
	--color-background-light: #F1EEEB;    /* Light Hintergrund */
	
	/* Accent & Utility */
	--color-accent: #f59e0b;            /* Akzentfarbe - ANPASSEN! */
	--color-success: #10b981;           /* Success - ANPASSEN! */
	--color-warning: #f59e0b;           /* Warning - ANPASSEN! */
	--color-error: #ef4444;             /* Error - ANPASSEN! */
	
	
	/* ============================================
	   TYPOGRAFIE - aus Figma
	   ========================================== */
	
	/* Font Families */
	--font-primary: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	
	/* Heading Sizes - Desktop */
	--font-h1-size: 60px;               /* Desktop */
	--font-h1-line-height: 1.4;         /* 140% */
	--font-h1-weight: 500;              /* Desktop */
	--font-h1-letter-spacing: 0.03em;   /* 3% */
	
	--font-h2-size: 56px;               /* Desktop */
	--font-h2-line-height: 1.4;         /* 140% */
	--font-h2-weight: 400;              /* Desktop */
	--font-h2-letter-spacing: 0.07em;   /* 7% */
	
	--font-h3-size: 34px;               /* Desktop */
	--font-h3-line-height: 1.4;         /* 140% */
	--font-h3-weight: 400;              /* Standard */
	--font-h3-letter-spacing: 0;        /* 0% */
	
	--font-h4-size: 24px;               /* ANPASSEN! */
	--font-h4-line-height: 1.4;         /* ANPASSEN! */
	--font-h4-weight: 600;              /* ANPASSEN! */
	
	--font-h5-size: 20px;               /* ANPASSEN! */
	--font-h5-line-height: 1.5;         /* ANPASSEN! */
	--font-h5-weight: 600;              /* ANPASSEN! */
	
	--font-h6-size: 18px;               /* ANPASSEN! */
	--font-h6-line-height: 1.5;         /* ANPASSEN! */
	--font-h6-weight: 600;              /* ANPASSEN! */
	
	/* Body Text */
	--font-body-size: 20px;             /* Desktop */
	--font-body-line-height: 1.4;       /* 140% */
	--font-body-weight: 400;            /* Desktop */
	
	/* Small Text */
	--font-small-size: 14px;            /* ANPASSEN! */
	--font-small-line-height: 1.5;      /* ANPASSEN! */
	
	
	/* ============================================
	   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: 8px;           /* ANPASSEN! */
	--button-padding-y: 16px;           /* ANPASSEN! */
	--button-border-radius: 0px;        /* ANPASSEN! */
	--button-font-size: 16px;           /* ANPASSEN! */
	--button-font-weight: 600;          /* ANPASSEN! */
	
	
	/* ============================================
	   BORDERS & SHADOWS - aus Figma
	   ========================================== */
	
	--border-radius-sm: 0px;            /* ANPASSEN! */
	--border-radius-md: 0px;            /* ANPASSEN! */
	--border-radius-lg: 0px;           /* ANPASSEN! */
	
	--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;
}


/* ============================================
   MOBILE OVERRIDES - aus Figma
   ========================================== */

@media (max-width: 768px) {
	:root {
		/* Heading Sizes - Mobile */
		--font-h1-size: 36px;           /* ANPASSEN! */
		--font-h2-size: 28px;           /* ANPASSEN! */
		--font-h3-size: 24px;           /* ANPASSEN! */
		--font-h4-size: 20px;           /* ANPASSEN! */
		--font-h5-size: 18px;           /* ANPASSEN! */
		--font-h6-size: 16px;           /* ANPASSEN! */
		
		/* Spacing - Mobile (optional kleiner) */
		--spacing-xl: 32px;             /* ANPASSEN! */
		--spacing-xxl: 48px;            /* ANPASSEN! */
		--spacing-xxxl: 64px;           /* ANPASSEN! */
		
		/* Buttons - Mobile */
		--button-padding-x: 24px;       /* ANPASSEN! */
		--button-padding-y: 12px;       /* ANPASSEN! */
	}
}