/**
 * StellarLink Media Brand System
 * Centralized CSS Custom Properties for consistent design implementation
 * 
 * This file contains all brand variables for colors, typography, spacing,
 * shadows, borders, and layout systems used across the StellarLink website.
 * 
 * Related files:
 * - brand-colors.css - Individual color custom properties
 * - brand-typography.css - Typography system implementation
 * - brand-spacing.css - Spacing scale and layout utilities
 */

:root {
	/* ===================================
     BRAND COLORS
     ================================== */

	/* Primary Brand Colors */
	--stellarlink-blue: #4285F4;
	--action-red: #DB4437;
	--success-green: #0F9D58;
	--innovation-yellow: #F4B400;
	--tech-purple: #8A2BE2;

	/* Legacy Color Support (deprecated - use semantic names below) */
	--google-blue: var(--stellarlink-blue);
	--google-red: var(--action-red);
	--google-green: var(--success-green);
	--google-yellow: var(--innovation-yellow);
	--complementary-purple: var(--tech-purple);

	/* Semantic Color Applications */
	--color-primary: var(--stellarlink-blue);
	--color-secondary: var(--tech-purple);
	--color-accent: var(--action-red);
	--color-success: var(--success-green);
	--color-warning: var(--innovation-yellow);
	--color-danger: var(--action-red);
	--tech-purple: #8A2BE2;

	/* Legacy Google Color Support */
	--google-blue: var(--stellarlink-blue);
	--google-red: var(--action-red);
	--google-green: var(--success-green);
	--google-yellow: var(--innovation-yellow);
	--complementary-purple: var(--tech-purple);

	/* Semantic Color Mappings */
	--primary-color: var(--stellarlink-blue);
	--secondary-color: var(--tech-purple);
	--accent-color: var(--action-red);
	--success-color: var(--success-green);
	--warning-color: var(--innovation-yellow);
	--danger-color: var(--action-red);

	/* Text Colors */
	--text-primary: #1a1a1a;
	--text-secondary: #4a4a4a;
	--text-tertiary: #6a6a6a;
	--text-light: #999999;
	--text-inverse: #ffffff;
	--text-muted: #999999;

	/* Background Colors */
	--background-primary: #ffffff;
	--background-secondary: #f8f9fa;
	--background-tertiary: #f1f3f4;
	--background-dark: #1a1a1a;
	--background-overlay: rgba(0, 0, 0, 0.5);

	/* Border Colors */
	--border-light: #e8eaed;
	--border-medium: #dadce0;
	--border-dark: #5f6368;
	--border-focus: var(--stellarlink-blue);

	/* ==============================================
     TYPOGRAPHY
     ============================================== */

	/* Font Families */
	--font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-secondary: Georgia, 'Times New Roman', serif;
	--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

	/* Font Sizes - Mobile First Approach */
	--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 */
	--text-6xl: 3.75rem;
	/* 60px */

	/* Font Weights */
	--font-thin: 100;
	--font-light: 300;
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;
	--font-black: 900;

	/* Line Heights */
	--leading-none: 1;
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;

	/* Letter Spacing */
	--tracking-tighter: -0.05em;
	--tracking-tight: -0.025em;
	--tracking-normal: 0em;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;

	/* ==============================================
     SPACING & LAYOUT
     ============================================== */

	/* Spacing Scale (Based on 0.25rem = 4px) */
	--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-8: 2rem;
	/* 32px */
	--space-10: 2.5rem;
	/* 40px */
	--space-12: 3rem;
	/* 48px */
	--space-16: 4rem;
	/* 64px */
	--space-20: 5rem;
	/* 80px */
	--space-24: 6rem;
	/* 96px */
	--space-32: 8rem;
	/* 128px */

	/* Container Widths */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-2xl: 1536px;

	/* Border Radius */
	--radius-none: 0;
	--radius-sm: 0.125rem;
	/* 2px */
	--radius-base: 0.25rem;
	/* 4px */
	--radius-md: 0.375rem;
	/* 6px */
	--radius-lg: 0.5rem;
	/* 8px */
	--radius-xl: 0.75rem;
	/* 12px */
	--radius-2xl: 1rem;
	/* 16px */
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* ==============================================
     ANIMATION & TRANSITIONS
     ============================================== */

	/* Transition Durations */
	--duration-75: 75ms;
	--duration-100: 100ms;
	--duration-150: 150ms;
	--duration-200: 200ms;
	--duration-300: 300ms;
	--duration-500: 500ms;
	--duration-700: 700ms;
	--duration-1000: 1000ms;

	/* Transition Timing Functions */
	--ease-linear: linear;
	--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);

	/* ==============================================
     Z-INDEX LAYERS
     ============================================== */

	--z-hide: -1;
	--z-auto: auto;
	--z-base: 0;
	--z-docked: 10;
	--z-dropdown: 1000;
	--z-sticky: 1100;
	--z-banner: 1200;
	--z-overlay: 1300;
	--z-modal: 1400;
	--z-popover: 1500;
	--z-skiplink: 1600;
	--z-toast: 1700;
	--z-tooltip: 1800;

	/* ==============================================
     COMPONENT-SPECIFIC PROPERTIES
     ============================================== */

	/* Buttons */
	--button-padding-sm: var(--space-2) var(--space-3);
	--button-padding-md: var(--space-3) var(--space-4);
	--button-padding-lg: var(--space-4) var(--space-6);
	--button-radius: var(--radius-md);
	--button-transition: all var(--duration-150) var(--ease-in-out);

	/* Forms */
	--input-padding: var(--space-3) var(--space-4);
	--input-border: 1px solid var(--border-medium);
	--input-border-focus: 2px solid var(--border-focus);
	--input-radius: var(--radius-md);
	--input-transition: border-color var(--duration-150) var(--ease-in-out);

	/* Cards */
	--card-padding: var(--space-6);
	--card-radius: var(--radius-lg);
	--card-shadow: var(--shadow-base);
	--card-border: 1px solid var(--border-light);

	/* Navigation */
	--nav-height: 4rem;
	--nav-padding: var(--space-4) var(--space-6);
	--nav-link-padding: var(--space-2) var(--space-3);
}

/* ==============================================
   RESPONSIVE DESIGN ADJUSTMENTS
   ============================================== */

/* Tablet and larger screens */
@media (min-width: 768px) {
	:root {
		/* Larger font sizes for desktop */
		--text-4xl: 2.5rem;
		/* 40px */
		--text-5xl: 3.5rem;
		/* 56px */
		--text-6xl: 4.5rem;
		/* 72px */

		/* Increased spacing for larger screens */
		--space-40: 10rem;
		/* 160px */
		--space-48: 12rem;
		/* 192px */
		--space-56: 14rem;
		/* 224px */
		--space-64: 16rem;
		/* 256px */
	}
}

/* Large screens */
@media (min-width: 1024px) {
	:root {
		/* Even larger spacing for desktop */
		--space-72: 18rem;
		/* 288px */
		--space-80: 20rem;
		/* 320px */
		--space-96: 24rem;
		/* 384px */
	}
}

/* ==============================================
   UTILITY CLASSES
   ============================================== */

/* Base typography class */
.stellarlink-typography {
	font-family: var(--font-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Color utilities */
.text-primary {
	color: var(--text-primary);
}

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

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

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

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

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

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

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

/* Brand color utilities */
.text-brand {
	color: var(--stellarlink-blue);
}

.text-success {
	color: var(--success-green);
}

.text-warning {
	color: var(--innovation-yellow);
}

.text-danger {
	color: var(--action-red);
}

.bg-brand {
	background-color: var(--stellarlink-blue);
}

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

.bg-warning {
	background-color: var(--innovation-yellow);
}

.bg-danger {
	background-color: var(--action-red);
}

/* ==============================================
   DARK MODE SUPPORT (Future Enhancement)
   ============================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--text-primary: #ffffff;
		--text-secondary: #e8eaed;
		--text-tertiary: #9aa0a6;
		--text-light: #80868b;
		--text-inverse: #1a1a1a;

		--background-primary: #1a1a1a;
		--background-secondary: #202124;
		--background-tertiary: #303134;
		--background-dark: #ffffff;

		--border-light: #3c4043;
		--border-medium: #5f6368;
		--border-dark: #80868b;
	}
}

/* ==============================================
   PRINT STYLES
   ============================================== */

@media print {
	:root {
		/* Simplified colors for print */
		--text-primary: #000000;
		--text-secondary: #333333;
		--background-primary: #ffffff;

		/* Print-friendly typography */
		--font-primary: Georgia, 'Times New Roman', serif;

		/* Remove shadows and transitions for print */
		--shadow-base: none;
		--shadow-md: none;
		--shadow-lg: none;
		--button-transition: none;
		--input-transition: none;
	}
}