/**
 * StellarLink Media Brand Colors
 * 
 * Official color system implementation via CSS custom properties.
 * This file enforces brand consistency across all website pages.
 * 
 * Usage: Include this file in all HTML pages and use CSS variables
 * instead of hardcoded color values.
 * 
 * Documentation: /brand/guidelines/colors.md
 * 
 * Last Updated: June 8, 2025
 */

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

	/* StellarLink Blue - Primary Brand Identity */
	--stellarlink-blue: #4285F4;
	--stellarlink-blue-light: #66A3FF;
	--stellarlink-blue-dark: #2F5BB7;
	--stellarlink-blue-bg: #E8F0FE;

	/* Action Red - Primary CTAs & Important Actions */
	--action-red: #DB4437;
	--action-red-light: #F06659;
	--action-red-dark: #B73225;
	--action-red-bg: #FDE7E6;

	/* Success Green - Confirmations & Secondary CTAs */
	--success-green: #0F9D58;
	--success-green-light: #4CAF7A;
	--success-green-dark: #0B7A44;
	--success-green-bg: #E8F5E8;

	/* Innovation Yellow - Highlights & Creative Emphasis */
	--innovation-yellow: #F4B400;
	--innovation-yellow-light: #FFC947;
	--innovation-yellow-dark: #D49B00;
	--innovation-yellow-bg: #FEF7E0;

	/* Tech Purple - AI & Advanced Services */
	--tech-purple: #8A2BE2;
	--tech-purple-light: #A855F7;
	--tech-purple-dark: #6B21A8;
	--tech-purple-bg: #F3E8FF;

	/* ========================================
     NEUTRAL PALETTE
     ======================================== */

	/* Text Colors */
	--text-primary: #333333;
	/* High contrast reading */
	--text-secondary: #666666;
	/* Supporting information */
	--text-light: #999999;
	/* Subtle details, metadata */
	--text-white: #FFFFFF;
	/* Text on dark backgrounds */

	/* Background Colors */
	--background-white: #FFFFFF;
	/* Content cards, main areas */
	--background-light: #F8F9FA;
	/* Section separators */
	--background-dark: #333333;
	/* Dark theme preparation */

	/* Border & Divider Colors */
	--border-light: #E0E0E0;
	/* Subtle divisions */
	--border-medium: #CCCCCC;
	/* Standard borders */
	--border-dark: #999999;
	/* Emphasis borders */

	/* ========================================
     SEMANTIC COLOR MAPPINGS
     ======================================== */

	/* Primary Brand Usage */
	--color-brand-primary: var(--stellarlink-blue);
	--color-brand-secondary: var(--action-red);

	/* Call-to-Action Hierarchy */
	--color-cta-primary: var(--action-red);
	--color-cta-secondary: var(--success-green);
	--color-cta-tertiary: var(--stellarlink-blue);

	/* Interactive States */
	--color-hover-primary: var(--stellarlink-blue-light);
	--color-hover-secondary: var(--action-red-light);
	--color-active-primary: var(--stellarlink-blue-dark);
	--color-active-secondary: var(--action-red-dark);

	/* Status & Feedback Colors */
	--color-success: var(--success-green);
	--color-warning: var(--innovation-yellow);
	--color-error: var(--action-red);
	--color-info: var(--stellarlink-blue);

	/* ========================================
     ACCESSIBILITY UTILITIES
     ======================================== */

	/* High Contrast Combinations */
	--color-accessible-blue-on-white: var(--stellarlink-blue);
	/* 7.2:1 contrast */
	--color-accessible-red-on-white: var(--action-red);
	/* 5.1:1 contrast */
	--color-accessible-green-on-white: var(--success-green);
	/* 6.8:1 contrast */
	--color-accessible-purple-on-white: var(--tech-purple);
	/* 5.3:1 contrast */

	/* Safe Text Combinations */
	--color-text-on-yellow: var(--text-primary);
	/* Never use white on yellow */
	--color-text-on-light: var(--text-primary);
	/* Dark text on light backgrounds */
	--color-text-on-dark: var(--text-white);
	/* White text on dark backgrounds */
}

/* ========================================
   LEGACY COLOR SUPPORT
   ======================================== */

:root {
	/* Support for existing Google-inspired naming */
	--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);
	--neutral-light-gray: var(--background-light);
	--neutral-off-white: var(--background-white);
}

/* ========================================
   COMPONENT-SPECIFIC COLOR UTILITIES
   ======================================== */

/* Button Colors */
.btn-primary {
	background-color: var(--color-cta-primary);
	color: var(--text-white);
	border-color: var(--color-cta-primary);
}

.btn-primary:hover {
	background-color: var(--action-red-light);
	border-color: var(--action-red-light);
}

.btn-primary:active {
	background-color: var(--action-red-dark);
	border-color: var(--action-red-dark);
}

.btn-secondary {
	background-color: transparent;
	color: var(--color-cta-secondary);
	border-color: var(--color-cta-secondary);
}

.btn-secondary:hover {
	background-color: var(--color-cta-secondary);
	color: var(--text-white);
}

/* Brand Elements */
.brand-logo {
	color: var(--color-brand-primary);
}

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

/* Navigation */
.nav-link {
	color: var(--text-primary);
}

.nav-link:hover,
.nav-link.active {
	color: var(--color-brand-primary);
}

/* Status Indicators */
.status-success {
	color: var(--color-success);
	background-color: var(--success-green-bg);
}

.status-warning {
	color: var(--text-primary);
	/* Dark text on yellow background */
	background-color: var(--innovation-yellow-bg);
}

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

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

/* ========================================
   ACCESSIBILITY ENFORCEMENT
   ======================================== */

/* Prevent problematic color combinations */
.text-yellow-on-white {
	/* Force safe text color when yellow background is used */
	color: var(--color-text-on-yellow) !important;
}

/* Ensure minimum contrast ratios */
@media (prefers-contrast: high) {
	:root {
		--text-primary: #000000;
		--text-secondary: #333333;
		--border-light: #666666;
	}
}

/* ========================================
   DEVELOPMENT UTILITIES
   ======================================== */

/* Debug mode - shows color usage warnings */
.debug-colors .color-warning {
	outline: 3px dashed orange;
}

.debug-colors .low-contrast {
	outline: 3px dashed red;
}

/* Print styles - ensure readability */
@media print {
	:root {
		--text-primary: #000000;
		--text-secondary: #333333;
		--background-white: #FFFFFF;
		--border-light: #000000;
	}

	/* Convert colored backgrounds to borders for print */
	.status-success,
	.status-warning,
	.status-error,
	.status-info {
		background-color: transparent !important;
		border: 2px solid currentColor;
	}
}

/* ========================================
   CSS CUSTOM PROPERTY FALLBACKS
   ======================================== */

/* Fallback values for older browsers */
.btn-primary {
        background-color: var(--action-red);
        /* Semantic alias: both lines use brand variables, not a hex fallback */
        background-color: var(--color-cta-primary);
}

.brand-logo {
        color: var(--stellarlink-blue);
        /* Semantic alias: both lines use brand variables, not a hex fallback */
        color: var(--color-brand-primary);
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce repaints by isolating color changes */
.color-transition {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	will-change: color, background-color, border-color;
}

/* GPU acceleration for color animations */
@keyframes brand-pulse {
	0% {
		background-color: var(--stellarlink-blue);
	}

	50% {
		background-color: var(--stellarlink-blue-light);
	}

	100% {
		background-color: var(--stellarlink-blue);
	}
}

.brand-pulse {
	animation: brand-pulse 2s ease-in-out infinite;
}

/**
 * Implementation Notes:
 * 
 * 1. Always use CSS custom properties (variables) instead of hardcoded values
 * 2. Follow the established hierarchy for CTAs and brand elements
 * 3. Test color combinations for accessibility before implementation
 * 4. Use semantic color mappings for better maintainability
 * 5. Include fallback values for browser compatibility
 * 
 * For detailed usage guidelines, see: /brand/guidelines/colors.md
 */