/* ============================================
   Lucia's Guide - CSS Variables (Common Styles)
   ============================================ */

:root {
	/* Colors - Primary & Secondary */
	--color-primary: #5454ff;
	--color-secondary: #021935;
	--color-lightgary: #96A6BA;
	--color-gary: #646464;
	--color-white: #ffffff;
	--color-black: #000000;
	
	/* Background Colors */
	--bg-primary: #5454ff;
	--bg-secondary: #021935;
	--bg-light: #F4F4FF;
	--bg-white: #ffffff;
	
	/* Border Colors */
	--border-light: #D8D8D8;
	--border-medium: #cfcfcf;
	--border-dark: #3A4E65;
	
	/* Text Colors */
	--text-primary: #5454ff;
	--text-secondary: #021935;
	--text-lightgary: #96A6BA;
	--text-gary: #646464;
	--text-white: #ffffff;
	
	/* Font Sizes - Base */
	--font-size-xs: 0.75rem;      /* 12px */
	--font-size-sm: 0.875rem;     /* 14px */
	--font-size-base: 1rem;       /* 16px */
	--font-size-lg: 1.125rem;     /* 18px */
	--font-size-xl: 1.25rem;      /* 20px */
	--font-size-xxl: 1.5rem;      /* 24px */
	
	/* Font Sizes - Large Screens */
	--font-size-2xl: 1.875rem;    /* 30px */
	--font-size-3xl: 2.25rem;     /* 36px */
	--font-size-4xl: 2.5rem;      /* 40px */
	--font-size-5xl: 3rem;        /* 48px */
	--font-size-6xl: 3.75rem;      /* 60px */
	--font-size-7xl: 4.5rem;      /* 72px */
	
	/* Font Families */
	--font-sora: 'Sora', sans-serif;
	--font-urbanist: 'Urbanist', sans-serif;
	
	/* Line Heights */
	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.6;
	--line-height-26: 1.625rem;
	--line-height-28: 1.75rem;
	--line-height-30: 1.875rem;
	--line-height-34: 2.125rem;
	--line-height-38: 2.375rem;
	--line-height-44: 2.75rem;
	--line-height-50: 3.125rem;
	--line-height-60: 3.75rem;
	--line-height-62: 3.875rem;
	
	/* Spacing */
	--spacing-4: 0.25rem;    /* 4px */
	--spacing-6: 0.375rem;   /* 6px */
	--spacing-8: 0.5rem;     /* 8px */
	--spacing-10: 0.625rem;  /* 10px */
	--spacing-12: 0.75rem;   /* 12px */
	--spacing-14: 0.875rem;  /* 14px */
	--spacing-15: 0.9375rem; /* 15px */
	--spacing-16: 1rem;      /* 16px */
	--spacing-18: 1.125rem;  /* 18px */
	--spacing-20: 1.25rem;   /* 20px */
	--spacing-24: 1.5rem;    /* 24px */
	--spacing-25: 1.5625rem; /* 25px */
	--spacing-30: 1.875rem;  /* 30px */
	--spacing-40: 2.5rem;    /* 40px */
	--spacing-50: 3.125rem;  /* 50px */
	--spacing-60: 3.75rem;   /* 60px */
	--spacing-70: 4.375rem;  /* 70px */
	--spacing-76: 4.75rem;   /* 76px */
	--spacing-80: 5rem;      /* 80px */
	--spacing-100: 6.25rem;  /* 100px */
	--spacing-120: 7.5rem;   /* 120px */
	
	/* Border Radius */
	--radius-sm: 0.375rem;   /* 6px */
	--radius-md: 0.5rem;    /* 8px */
	--radius-lg: 0.75rem;    /* 12px */
	--radius-xl: 1.25rem;    /* 20px */
	--radius-2xl: 1.5625rem; /* 25px */
	--radius-50: 3.125rem;   /* 50px */
	--radius-full: 9999px;
	
	/* Transitions */
	--transition-fast: 300ms;
	--transition-normal: 500ms;
	--transition-slow: 700ms;
	--transition-default: 500ms;
	
	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	
	/* Z-index */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
	--z-99: 99;
	--z-1002: 1002;
	
	/* Breakpoints (for reference) */
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--breakpoint-xxl: 1400px;
}

/* Utility Classes using CSS Variables */
.text-primary {
	color: var(--color-primary);
}

.text-secondary {
	color: var(--color-secondary);
}

.text-gary {
	color: var(--color-gary);
}

.text-lightgary {
	color: var(--color-lightgary);
}

.bg-primary {
	background-color: var(--bg-primary);
}

.bg-secondary {
	background-color: var(--bg-secondary);
}

.border-primary {
	border-color: var(--color-primary);
}

/* Font Family Utilities */
.font-sora {
	font-family: var(--font-sora);
}

.font-urbanist {
	font-family: var(--font-urbanist);
}

/* Transition Utilities */
.duration-500 {
	transition-duration: var(--transition-default);
}

/* Custom spacing utilities can be added here */