/**
 * Design Tokens
 * ============================================================================
 * This file contains all design tokens (CSS custom properties) that define
 * the design system for the Staff Skills Academy website.
 * 
 * Using a systematic approach helps maintain consistency and makes the
 * codebase more maintainable.
 */

:root {
	/* ==========================================================================
	   1. Colors (existing + new shadow tokens)
	   ========================================================================== */

	/* Brand Colors */
	--black: #2b2b2b;
	--ssa-main: #085570;
	--ssa-highlight: #b7f4af;
	--cream: #f6f6f2;
	--grey: #cccccc;
	--grey-light: #f2f2f2;
	--text-secondary: #666666; /* Medium grey for secondary text, breadcrumbs, meta info */
	--bg-2: #c3d8d8;
	--bg-1: #ecf8f8;
	--alert: #ff2a2a;
	--alert-bg: #fee7e7;
	--confirm: #6eb36a;
	--focus: #0075ff;
	--white: #ffffff;
	--link-color: #2C414C;
	--border-grey: #d8d8d8;
	--courses-background: #EBF7F7;

	/* Shadow and overlay colors */
	--shadow-light: rgba(0, 0, 0, 0.1);
	--shadow-medium: rgba(0, 0, 0, 0.2);
	--shadow-dark: rgba(0, 0, 0, 0.3);
	--overlay-dark: rgba(0, 0, 0, 0.5);
	--ssa-main-rgb: 8, 85, 112;
	--ssa-highlight-rgb: 183, 244, 175;

	/* ==========================================================================
	   2. Typography Scale (using rem for better accessibility)
	   ========================================================================== */

	/* Font Families */
	--font-body: "Archivo", sans-serif;
	--font-heading: "Archivo", sans-serif;

	/* Font Sizes - using a modular scale (1.25 ratio) */
	--text-xs: 0.64rem;
	/* 10.24px */
	--text-sm: 0.8rem;
	/* 12.8px */
	--text-base: 1rem;
	/* 16px */
	--text-lg: 1.25rem;
	/* 20px */
	--text-xl: 1.563rem;
	/* 25px */
	--text-2xl: 1.953rem;
	/* 31.25px */
	--text-3xl: 2.441rem;
	/* 39px */
	--text-4xl: 3.052rem;
	/* 48.8px */
	--text-5xl: 3.815rem;
	/* 61px */

	/* Font Weights */
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-black: 900;

	/* Line Heights */
	--leading-none: 1;
	--leading-tight: 1.2;
	--leading-normal: 1.5;
	--leading-relaxed: 1.75;
	--leading-loose: 2;

	/* Letter Spacing */
	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.02em;
	--tracking-wider: 0.04em;

	/* ==========================================================================
	   3. Spacing Scale (8px base)
	   ========================================================================== */

	--space-0: 0;
	--space-1: 0.25rem;
	/* 4px */
	--space-2: 0.5rem;
	/* 8px */
	--space-3: 0.75rem;
	/* 12px */
	--space-4: 1rem;
	/* 16px */
	--space-5: 1.25rem;
	/* 20px */
	--space-6: 1.5rem;
	/* 24px */
	--space-7: 2rem;
	/* 32px */
	--space-8: 2.5rem;
	/* 40px */
	--space-9: 3rem;
	/* 48px */
	--space-10: 4rem;
	/* 64px */
	--space-11: 5rem;
	/* 80px */
	--space-12: 6rem;
	/* 96px */
	--space-16: 8rem;
	/* 128px */
	--space-20: 10rem;
	/* 160px */

	/* Mega Menu Positioning Variables 
	 * Note: Positioned relative to nav container, not viewport
	 * These values ensure proper alignment without gaps
	 */
	--mega-menu-desktop-offset: 55px;
	--mega-menu-desktop-scrolling-offset: 55px;
	--mega-menu-mobile-toggle-offset: 52px;
	--mega-menu-mobile-offset: 74px;
	--mega-menu-mobile-scrolling-offset: 56px;

	/* ==========================================================================
	   4. Breakpoints (for reference in comments and JS)
	   ========================================================================== */

	/* These are defined as CSS custom properties for consistency */
	/* Use these values in media queries: */
	/* Legacy breakpoints (for backward compatibility): */
	/* Mobile: 480px */
	/* Tablet: 768px */
	/* Desktop: 1024px */
	/* Wide: 1280px */
	/* New Tailwind-aligned breakpoints (preferred): */
	/* xsm: 480px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */

	--bp-mobile: 480px;   /* Legacy - keep for backward compatibility */
	--bp-tablet: 768px;
	--bp-desktop: 1024px;
	--bp-wide: 1280px;
	
	/* Extended Tailwind v4 aligned breakpoints (new standard) */
	--bp-xsm: 480px;  /* Extra small devices (phones portrait) */
	--bp-sm: 640px;   /* Small devices (phones landscape) */
	--bp-md: 768px;   /* Medium devices/tablets */
	--bp-lg: 1024px;  /* Large devices/small desktops */
	--bp-xl: 1280px;  /* Extra large devices */
	--bp-2xl: 1536px; /* 2X large screens */

	/* ==========================================================================
	   5. Z-Index Scale
	   ========================================================================== */

	--z-below: -1;
	--z-base: 0;
	--z-above: 10;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-modal-backdrop: 400;
	--z-modal: 500;
	--z-popover: 600;
	--z-tooltip: 700;
	--z-notification: 800;
	--z-maximum: 9999;

	/* ==========================================================================
	   6. Border Radius
	   ========================================================================== */

	--radius-none: 0;
	--radius-sm: 0.25rem;
	/* 4px */
	--radius-base: 0.5rem;
	/* 8px */
	--radius-md: 0.75rem;
	/* 12px */
	--radius-lg: 1rem;
	/* 16px */
	--radius-xl: 1.5rem;
	/* 24px */
	--radius-2xl: 2rem;
	/* 32px */
	--radius-full: 9999px;
	/* Pill shape */

	/* ==========================================================================
	   7. Transitions
	   ========================================================================== */

	--transition-fast: 150ms ease-in-out;
	--transition-base: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;
	--transition-slower: 500ms ease-in-out;

	/* Easing Functions */
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* ==========================================================================
	   8. Shadows
	   ========================================================================== */

	--shadow-xs: 0 1px 2px 0 var(--shadow-light);
	--shadow-sm: 0 2px 4px 0 var(--shadow-light);
	--shadow-base: 0 4px 6px -1px var(--shadow-light);
	--shadow-md: 0 8px 16px -2px var(--shadow-light);
	--shadow-lg: 0 10px 24px -3px var(--shadow-light);
	--shadow-xl: 0 20px 48px -4px var(--shadow-light);
	--shadow-2xl: 0 25px 60px -5px var(--shadow-light);

	/* Special Shadows */
	--shadow-inner: inset 0 2px 4px 0 var(--shadow-light);
	--shadow-outline: 0 0 0 3px var(--focus);

	/* ==========================================================================
	   9. Container Widths
	   ========================================================================== */

	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-2xl: 1536px;

	/* ==========================================================================
	   10. Aspect Ratios
	   ========================================================================== */

	--aspect-square: 1 / 1;
	--aspect-video: 16 / 9;
	--aspect-photo: 4 / 3;
	--aspect-portrait: 3 / 4;
}

/* ==========================================================================
   Responsive Custom Properties
   ========================================================================== */

/* Tablet and up */
@media (min-width: 768px) {
	:root {
		/* Adjust base font size for larger screens */
		--text-base: 1.125rem;
		/* 18px */
	}
}

/* Desktop and up */
@media (min-width: 1024px) {
	:root {
		/* Fine-tune spacing for desktop */
		--space-section: 8rem;
		/* Section spacing */
	}
}