/* variables.css */

/* WebOne 2026 */
/* This file defines CSS variables for colors, typography, spacing, layout, interactive states, and shadows. */
/* Centralized location for managing design tokens, ensuring consistency across the application. */

:root {
	/* Colors */
	--white: #fff;
	--lightGray: #f3f3f3;
	--mediumGray: #ccc;
	--darkGray: #333;
	--gray: #c3c3c3;
	--gray2: #cdcdcd;
	--black: #000;
	--red: #f65d5d;
	--yellow: #ffe479;
	--turquoise: #2bb6b6;
	--orange: rgb(218, 98, 1);
	--CBlue: #1FA7AF;
	--CBlueLight: rgba(31, 168, 175, 0.2);
	--light-blue: #E6F5F6;
	--dark-grey-blue: #A3C0C2;
	--textdarkgrey: #383838;
	--textlightgrey: #9ca3af;
	--bgBlue: #E8F2F2;

	/* Gradients */
	--gradient-orange: linear-gradient(135deg, rgb(218, 98, 1), rgb(255, 165, 0));
	--gradient-blue: linear-gradient(135deg, #1FA7AF, #218c8c);

	/* Typography */
	--font-primary: -apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		'Helvetica Neue',
		sans-serif;
	--font-mono: 'Courier New',
		monospace;
	--font-size-xs: clamp(0.75rem, 1.5vw, 0.875rem);
	--font-size-sm: clamp(0.875rem, 2vw, 1rem);
	--font-size-base: clamp(1rem, 2.5vw, 1.125rem);
	--font-size-md: clamp(1.125rem, 3vw, 1.25rem);
	--font-size-lg: clamp(1.25rem, 3.5vw, 1.5rem);
	--font-size-xl: clamp(1.775rem, 5vw, 2.07125rem);
	--font-size-2xl: clamp(2.25rem, 6.5vw, 2.75rem);
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--line-height-tight: 1.3;
	--line-height-base: 1.5;
	--line-height-relaxed: 1.75;

	/* Spacing Scale */
	--space-xs: clamp(0.25rem, 1vw, 0.5rem);
	--space-sm: clamp(0.5rem, 1.5vw, 1rem);
	--space-md: clamp(1rem, 2vw, 1.5rem);
	--space-lg: clamp(1.5rem, 3vw, 2rem);
	--space-xl: clamp(2rem, 4vw, 3rem);
	--space-2xl: clamp(3rem, 5vw, 4rem);

	/* Layout */
	--container-max: 1200px;
	--container-padding: var(--space-lg);
	--border-radius-sm: 0.375rem;
	/* --border-radius-md: 0.5rem; */
	--border-radius-md: 0.703rem;
	--border-radius-lg: 1rem;
	--border-width: 1px;

	/* Interactive States */
	--hover-opacity: 0.85;
	--focus-outline: 2px solid var(--CBlue);
	--focus-outline-offset: 2px;
	--transition-fast: 150ms ease-in-out;
	--transition-base: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

	/* Z-index Scale */
	--z-dropdown: 1000;
	--z-modal: 1050;
	--z-popover: 1100;
	--z-tooltip: 1150;

	/* Breakpoints */
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;

	/* Status Colors */
	--success: #10b981;
	--warning: #f59e0b;
	--error: #ef4444;
	--info: #3b82f6;
}