/**
 * AION Theme - Design System Variables
 *
 * CSS custom properties (design tokens) for consistent styling across the theme.
 *
 * Breakpoints (reference only - use values directly in media queries):
 *   Mobile:  320px  (default / no query)
 *   Tablet:  768px  (@media (min-width: 768px))
 *   Desktop: 1024px (@media (min-width: 1024px))
 *   Wide:    1280px (@media (min-width: 1280px))
 */

:root {

	/* =========================================================
	   Colors
	   ========================================================= */

	/* Brand */
	--color-primary:     #1B3A6B; /* Navy - heroes, dark sections, primary brand */
	--color-accent:      #00B4D8; /* Cyan - CTAs, links, highlights */
	--color-white:       #FFFFFF;

	/* Text */
	--color-dark-text:   #1A1A2E; /* Headings */
	--color-body-text:   #4A4A68; /* Body copy */

	/* Backgrounds */
	--color-light-bg:    #F5F7FA; /* Light section background */
	--color-medium-gray: #E2E8F0; /* Dividers, subtle backgrounds */
	--color-border:      #CBD5E1; /* Borders, form inputs */

	/* Status */
	--color-success:     #10B981;
	--color-error:       #EF4444;
	--color-warning:     #F59E0B;

	/* Derived / Hover States */
	--color-primary-dark:  #142d54; /* Navy darkened ~10% for hover */
	--color-accent-dark:   #0096b8; /* Cyan darkened ~10% for hover */
	--color-accent-light:  #e0f7fd; /* Cyan tinted for badge backgrounds */
	--color-accent-text:   #0077A8; /* WCAG AA 4.5:1 contrast on white — use for accent text, links, badges on light backgrounds */

	/* =========================================================
	   Typography
	   ========================================================= */

	--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

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

	/* Line Heights */
	--leading-tight:   1.25;
	--leading-normal:  1.5;
	--leading-relaxed: 1.75;

	/* Font Weights */
	--weight-normal:   400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-bold:     700;

	/* =========================================================
	   Spacing Scale
	   ========================================================= */

	--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-8:  2rem;     /* 32px */
	--space-10: 2.5rem;   /* 40px */
	--space-12: 3rem;     /* 48px */
	--space-16: 4rem;     /* 64px */
	--space-20: 5rem;     /* 80px */

	/* =========================================================
	   Border Radius
	   ========================================================= */

	--radius-sm:   0.25rem;  /* 4px  - small elements, badges */
	--radius-md:   0.5rem;   /* 8px  - cards, buttons */
	--radius-lg:   1rem;     /* 16px - large cards, modals */
	--radius-full: 9999px;   /* Pills, circles */

	/* =========================================================
	   Shadows
	   ========================================================= */

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.08);

	/* =========================================================
	   Transitions
	   ========================================================= */

	--transition-fast:   150ms ease;
	--transition-normal: 300ms ease;

	/* =========================================================
	   Container Widths
	   ========================================================= */

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

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

	--z-overlay: 900;
	--z-nav:     1000;
	--z-modal:   1050;

}