/**
 * CSS Variables
 * CSS variables – colors, fonts, and sizes
 * Based on Figma Design Variables
 *
 * @package Experis_Academy
 */

:root {
	/* Colors - colors */
	--color-white: #ffffff;
	--color-grey-1: #282a32;
	--color-grey-2: #666666;
	--color-grey-3: #999999;
	--color-grey-4: #b0b0b0;
	--color-grey-light: #f5f5f5;
	
	/* Violet/Purple - purple color */
	--color-violet-primary: #4f4296;
	--color-violet-2: #4f4296;
	--color-violet-gradient-start: #736bde;
	--color-violet-gradient-mid: #5c4bb9;
	--color-violet-gradient-end: #4f4296;
	--color-violet-hover-start: #8177e8;
	--color-violet-hover-mid: #6956c9;
	--color-violet-hover-end: #5d4ca6;

	/* Legacy orange aliases → violet (backward compatibility) */
	--color-orange-primary: var(--color-violet-primary);
	--color-orange-light: var(--color-violet-gradient-start);
	--color-orange-dark: var(--color-violet-gradient-end);
	--color-orange-logo: var(--color-violet-gradient-mid);
	
	/* Logo Colors - logo colors */
	--color-logo-orange: var(--color-violet-primary);
	--color-logo-teal: #1100ff;
	--color-logo-blue: #1100ff;
	
	/* Text Colors - text colors */
	--color-text-primary: #333333;
	--color-text-secondary: #666666;
	--color-text-light: #999999;
	--color-text-white: #ffffff;
	
	/* Background Colors - background colors */
	--color-bg-white: #ffffff;
	--color-bg-grey: #f5f5f5;
	
	/* Border Colors - border colors */
	--color-border: #e0e0e0;
	--color-border-dark: #b0b0b0;
	
	/* Focus/Accessibility Colors - focus and accessibility colors */
	--color-focus: #0073aa;
	
	/* Banner Block - banner colors (Figma 209-2557) */
	--color-banner-bg: #1e2035;
	--color-banner-title: #a38fe6;
	--color-banner-text: #e0e0e0;
	
	/* Font Families - font families */
	--font-family-hebrew: 'Noto Sans Hebrew', -apple-system, BlinkMacSystemFont, sans-serif;
	
	/* Font Sizes - font sizes */
	--font-size-xs: 0.75rem;      /* 12px - ManpowerGroup */
	--font-size-sm: 0.875rem;    /* 14px - Academy */
	--font-size-base: 1rem;      /* 16px - Menu items */
	--font-size-lg: 1.125rem;    /* 18px - Experis */
	--font-size-xl: 1.25rem;     /* 20px */
	--font-size-2xl: 1.5rem;     /* 24px */
	--font-size-3xl: 1.75rem;    /* 28px */
	--font-size-4xl: 2rem;       /* 32px */
	--font-size-5xl: 2.5rem;     /* 40px */
	--font-size-6xl: 3.5rem;     /* 56px */
	--font-size-7xl: 4.5rem;     /* 72px */
	
	/* Font Weights - font weights */
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	
	/* Line Heights - line heights */
	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.75;
	
	/* Spacing - spacing */
	--spacing-xs: 0.25rem;    /* 4px */
	--spacing-sm: 0.5rem;     /* 8px */
	--spacing-md: 1rem;       /* 16px */
	--spacing-lg: 1.5rem;     /* 24px */
	--spacing-xl: 2rem;       /* 32px */
	--spacing-2xl: 3rem;      /* 48px */
	
	/* Border Radius - border radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;
	--radius-full: 9999px;
	
	/* Transitions - transitions */
	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;
	
	/* Z-index - layers */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-modal: 1050;
}