/**
 * Design Tokens
 * CSS Custom Properties for MG Theme
 *
 * @package MG
 */

:root {
	/* ========================================
	   Typography - Measured from mgmotor.pl
	   ======================================== */

	/* Font Families */
	--mg-font-sans: Favorit, sans-serif;

	/* Font Weights */
	--mg-font-weight-regular: 300;
	--mg-font-weight-medium: 500;
	--mg-font-weight-semibold: 600;
	--mg-font-weight-bold: 700;

	/* Font Sizes */
	--mg-text-xs: 0.75rem;    /* 12px */
	--mg-text-sm: 0.875rem;   /* 14px */
	--mg-text-base: 1rem;     /* 16px */
	--mg-text-lg: 1.125rem;   /* 18px */
	--mg-text-xl: 1.25rem;    /* 20px */
	--mg-text-2xl: 1.5rem;    /* 24px */
	--mg-text-3xl: 1.875rem;  /* 30px */
	--mg-text-4xl: 2.25rem;   /* 36px */
	--mg-text-5xl: 3rem;      /* 48px */

	/* Line Heights */
	--mg-leading-none: 1;
	--mg-leading-tight: 1.2;
	--mg-leading-snug: 1.4;
	--mg-leading-normal: 1.5;
	--mg-leading-relaxed: 1.6;

	/* Letter Spacing */
	--mg-tracking-tight: -0.01em;
	--mg-tracking-normal: 0;
	--mg-tracking-wide: 0.05em;
	/* TODO: Measure letter-spacing from mgmotor.pl headings/nav */

	/* ========================================
	   Colors - Measured from mgmotor.pl
	   ======================================== */

	/* Base Colors */
	--mg-color-white: #ffffff;
	--mg-color-black: #000000;

	/* Text Colors */
	--mg-color-text: #000000;
	--mg-color-text-muted: #666666;
	--mg-color-text-light: #999999;

	/* Background Colors */
	--mg-color-bg: #ffffff;
	--mg-color-bg-alt: #f5f5f5;

	/* Border Colors */
	--mg-color-border: #e0e0e0;
	--mg-color-border-dark: #cccccc;

	/* Link Colors - Neutral until measured */
	--mg-color-link: #1a1a1a;
	--mg-color-link-hover: #000000;
	/* TODO: Measure actual link colors from mgmotor.pl */

	/* Focus/Interaction - Neutral */
	--mg-color-focus: #333333;
	--mg-color-hover-bg: #f5f5f5;

	/* ========================================
	   CTA Button - Measured from mgmotor.pl
	   ======================================== */

	--mg-color-cta-bg: #ffffff;
	--mg-color-cta-text: #000000;
	--mg-color-cta-border: #ffffff;
	--mg-color-cta-border-hover: #efefef;
	--mg-color-cta-text-hover: #ffffff;
	--mg-cta-border-width: 2px;
	--mg-cta-padding: 12px 30px;
	--mg-cta-max-height: 48px;
	--mg-cta-bg-gradient: linear-gradient(270deg, #fff 50%, #000 0);
	--mg-cta-bg-size: 300% 200%;
	--mg-cta-bg-position: 100%;
	--mg-cta-bg-position-hover: 0 100%;
	--mg-cta-transition: .4s ease-out;

	/* ========================================
	   Spacing Scale - Conventional
	   ======================================== */

	--mg-space-0: 0;
	--mg-space-1: 0.25rem;   /* 4px */
	--mg-space-2: 0.5rem;    /* 8px */
	--mg-space-3: 0.75rem;   /* 12px */
	--mg-space-4: 1rem;      /* 16px */
	--mg-space-5: 1.5rem;    /* 24px */
	--mg-space-6: 2rem;      /* 32px */
	--mg-space-7: 3rem;      /* 48px */
	--mg-space-8: 4rem;      /* 64px */
	--mg-space-9: 6rem;      /* 96px */

	/* ========================================
	   Layout Containers - Measured from mgmotor.pl
	   ======================================== */

	--mg-container-max: 1568px;
	--mg-gutter-mobile: 16px;
	--mg-gutter-tablet: 24px;
	--mg-gutter-desktop: 32px;

	/* ========================================
	   Border Radius - Measured from mgmotor.pl
	   ======================================== */

	--mg-radius-sm: 2px;
	--mg-radius-md: 4px;
	--mg-radius-lg: 8px;
	--mg-radius-xl: 12px;
	--mg-radius-full: 9999px;
	--mg-radius-slide: 10px;
	--mg-radius-cta: 100px;

	/* ========================================
	   Z-Index Scale
	   ======================================== */

	--mg-z-base: 1;
	--mg-z-dropdown: 10;
	--mg-z-sticky: 50;
	--mg-z-header: 100;
	--mg-z-overlay: 200;
	--mg-z-modal: 300;

	/* ========================================
	   Breakpoints (for reference in comments)
	   ======================================== */

	/* Breakpoints are used in media queries, not as variables:
	   --mg-breakpoint-sm: 640px
	   --mg-breakpoint-md: 768px
	   --mg-breakpoint-lg: 1024px
	   --mg-breakpoint-xl: 1280px
	   --mg-breakpoint-2xl: 1536px
	*/
}