/**
 * GTAW Bridge Design Tokens
 * Unified design system variables for consistent theming
 *
 * This file defines all CSS custom properties (variables) used throughout
 * the GTAW Bridge plugin. These tokens ensure visual consistency and make
 * theming easier.
 *
 * Usage Examples:
 *   - Use color tokens: `color: var(--gtaw-color-text);`
 *   - Use spacing tokens: `padding: var(--gtaw-spacing-md);`
 *   - Use typography tokens: `font-size: var(--gtaw-font-size-base);`
 *
 * Override tokens in your theme's CSS to customize the plugin appearance:
 *   :root {
 *     --gtaw-color-primary: #your-color;
 *   }
 *
 * @package GTAW_Bridge
 * @since 1.0.0
 */

:root {
	/* ============================================
	   Colors - Primary Palette
	   ============================================
	   Primary brand colors used for main actions,
	   links, and key UI elements.
	   
	   Usage:
	   - Primary buttons: background-color: var(--gtaw-color-primary);
	   - Hover states: background-color: var(--gtaw-color-primary-hover);
	   - Light backgrounds: background-color: var(--gtaw-color-primary-light);
	   - Dark accents: border-color: var(--gtaw-color-primary-dark);
	 */
	--gtaw-color-primary: #2F67F6;
	--gtaw-color-primary-hover: #1e4fd6;
	--gtaw-color-primary-light: #e7f5ff;
	--gtaw-color-primary-dark: #135e96;

	/* ============================================
	   Colors - Semantic
	   ============================================
	   Semantic colors for status indicators,
	   alerts, and feedback messages.
	   
	   Usage:
	   - Success states: color: var(--gtaw-color-success);
	   - Warning messages: background: var(--gtaw-color-warning-light);
	   - Error states: border-color: var(--gtaw-color-danger);
	 */
	--gtaw-color-success: #1f9d55;
	--gtaw-color-success-light: #d1fae5;
	--gtaw-color-success-dark: #065f46;
	--gtaw-color-warning: #f59e0b;
	--gtaw-color-warning-light: #fef3c7;
	--gtaw-color-warning-dark: #92400e;
	--gtaw-color-danger: #dc2626;
	--gtaw-color-danger-light: #fee2e2;
	--gtaw-color-danger-dark: #991b1b;

	/* ============================================
	   Colors - Neutral Palette
	   ============================================
	   Neutral colors for backgrounds, surfaces,
	   and borders. Used for layout and structure.
	   
	   Usage:
	   - Card backgrounds: background: var(--gtaw-color-surface);
	   - Page backgrounds: background: var(--gtaw-color-background);
	   - Borders: border-color: var(--gtaw-color-border);
	 */
	--gtaw-color-surface: #ffffff;
	--gtaw-color-surface-alt: #f6f7f9;
	--gtaw-color-surface-elevated: #ffffff;
	--gtaw-color-background: #f0f0f1;
	--gtaw-color-border: #e5e7eb;
	--gtaw-color-border-light: #e8e8e8;
	--gtaw-color-border-dark: #d1d5db;

	/* ============================================
	   Colors - Text
	   ============================================
	   Text color tokens for different hierarchy
	   levels and contexts.
	   
	   Usage:
	   - Primary text: color: var(--gtaw-color-text);
	   - Secondary text: color: var(--gtaw-color-text-secondary);
	   - Muted text: color: var(--gtaw-color-text-muted);
	   - Text on dark backgrounds: color: var(--gtaw-color-text-inverse);
	 */
	--gtaw-color-text: #1d2327;
	--gtaw-color-text-secondary: #646970;
	--gtaw-color-text-light: #888888;
	--gtaw-color-text-muted: #6b7280;
	--gtaw-color-text-inverse: #ffffff;

	/* ============================================
	   Spacing Scale
	   ============================================
	   Consistent spacing values following an 4px
	   base unit system. Use for padding, margins,
	   and gaps.
	   
	   Usage:
	   - Small gaps: gap: var(--gtaw-spacing-sm);
	   - Card padding: padding: var(--gtaw-spacing-lg);
	   - Section margins: margin-bottom: var(--gtaw-spacing-xl);
	   
	   Scale: xs (4px) → sm (8px) → md (12px) → lg (16px) → xl (24px) → 2xl (32px) → 3xl (40px) → 4xl (48px)
	 */
	--gtaw-spacing-xs: 4px;
	--gtaw-spacing-sm: 8px;
	--gtaw-spacing-md: 12px;
	--gtaw-spacing-lg: 16px;
	--gtaw-spacing-xl: 24px;
	--gtaw-spacing-2xl: 32px;
	--gtaw-spacing-3xl: 40px;
	--gtaw-spacing-4xl: 48px;

	/* ============================================
	   Typography
	   ============================================
	   Font families, sizes, weights, and line heights
	   for consistent text styling across the plugin.
	   
	   Usage:
	   - Base font: font-family: var(--gtaw-font-family-base);
	   - Headings: font-family: var(--gtaw-font-family-heading);
	   - Body text: font-size: var(--gtaw-font-size-base);
	 */
	--gtaw-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--gtaw-font-family-heading: "Inter", var(--gtaw-font-family-base);
	--gtaw-font-family-body: "Inter", var(--gtaw-font-family-base);

	/* Font Sizes
	   Scale from xs (12px) to 3xl (32px).
	   Use base (16px) as the default body text size.
	 */
	--gtaw-font-size-xs: 12px;
	--gtaw-font-size-sm: 14px;
	--gtaw-font-size-base: 16px;
	--gtaw-font-size-lg: 18px;
	--gtaw-font-size-xl: 24px;
	--gtaw-font-size-2xl: 28px;
	--gtaw-font-size-3xl: 32px;

	/* Font Weights
	   Use normal (400) for body text, medium (500) for emphasis,
	   semibold (600) for subheadings, bold (700) for headings.
	 */
	--gtaw-font-weight-normal: 400;
	--gtaw-font-weight-medium: 500;
	--gtaw-font-weight-semibold: 600;
	--gtaw-font-weight-bold: 700;

	/* Line Heights
	   - Tight (1.2): For headings and single-line text
	   - Normal (1.5): Default for body text
	   - Relaxed (1.6): For long-form content
	 */
	--gtaw-line-height-tight: 1.2;
	--gtaw-line-height-normal: 1.5;
	--gtaw-line-height-relaxed: 1.6;

	/* ============================================
	   Border Radius
	   ============================================
	   Rounded corner values for consistent border
	   radius across UI elements.
	   
	   Usage:
	   - Buttons: border-radius: var(--gtaw-radius-md);
	   - Cards: border-radius: var(--gtaw-radius-lg);
	   - Pills/badges: border-radius: var(--gtaw-radius-full);
	 */
	--gtaw-radius-sm: 4px;
	--gtaw-radius-md: 6px;
	--gtaw-radius-lg: 8px;
	--gtaw-radius-xl: 12px;
	--gtaw-radius-full: 9999px;

	/* ============================================
	   Shadows
	   ============================================
	   Elevation shadows for depth and hierarchy.
	   Use progressively larger shadows for higher
	   elevation (modals, popovers, etc.).
	   
	   Usage:
	   - Cards: box-shadow: var(--gtaw-shadow-sm);
	   - Dropdowns: box-shadow: var(--gtaw-shadow-md);
	   - Modals: box-shadow: var(--gtaw-shadow-lg);
	 */
	--gtaw-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
	--gtaw-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
	--gtaw-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
	--gtaw-shadow-xl: 0 12px 32px rgba(15, 23, 42, 0.16);

	/* ============================================
	   Transitions
	   ============================================
	   Animation timing for smooth state changes.
	   Automatically respects prefers-reduced-motion.
	   
	   Usage:
	   - Hover effects: transition: all var(--gtaw-transition-fast);
	   - Default transitions: transition: opacity var(--gtaw-transition-base);
	   - Complex animations: transition: transform var(--gtaw-transition-slow);
	 */
	--gtaw-transition-fast: 0.15s ease;
	--gtaw-transition-base: 0.2s ease;
	--gtaw-transition-slow: 0.3s ease;

	/* ============================================
	   Z-Index Scale
	   ============================================
	   Layering system for stacking contexts.
	   Use these values to ensure proper layering
	   of overlays, modals, and floating elements.
	   
	   Usage:
	   - Dropdowns: z-index: var(--gtaw-z-dropdown);
	   - Modals: z-index: var(--gtaw-z-modal);
	   - Tooltips: z-index: var(--gtaw-z-tooltip);
	   
	   Scale: base (1) → dropdown (1000) → sticky (1020) → fixed (1030) → 
	          modal-backdrop (1040) → modal (1050) → popover (1060) → tooltip (1070) → toast (100000)
	 */
	--gtaw-z-base: 1;
	--gtaw-z-dropdown: 1000;
	--gtaw-z-sticky: 1020;
	--gtaw-z-fixed: 1030;
	--gtaw-z-modal-backdrop: 1040;
	--gtaw-z-modal: 1050;
	--gtaw-z-popover: 1060;
	--gtaw-z-tooltip: 1070;
	--gtaw-z-toast: 100000;

	/* ============================================
	   Layout
	   ============================================
	   Maximum widths for containers, content areas,
	   and forms to ensure readable line lengths
	   and consistent layouts.
	   
	   Usage:
	   - Main container: max-width: var(--gtaw-container-max-width);
	   - Content areas: max-width: var(--gtaw-content-max-width);
	   - Forms: max-width: var(--gtaw-form-max-width);
	 */
	--gtaw-container-max-width: 1400px;
	--gtaw-content-max-width: 800px;
	--gtaw-form-max-width: 600px;

	/* ============================================
	   Accessibility
	   ============================================
	   Accessibility-focused tokens for focus indicators
	   and touch targets. Ensures WCAG compliance.
	   
	   Usage:
	   - Focus outline: outline: var(--gtaw-focus-width) solid var(--gtaw-focus-color);
	   - Touch targets: min-height: var(--gtaw-touch-target-min);
	 */
	--gtaw-focus-width: 2px;
	--gtaw-focus-color: var(--gtaw-color-primary);
	--gtaw-focus-offset: 2px;
	--gtaw-touch-target-min: 44px;

	/* ============================================
	   Breakpoints (for JavaScript/Media Queries)
	   ============================================
	   Responsive breakpoints for media queries.
	   Note: These are CSS variables and cannot be
	   used directly in @media queries. Use JavaScript
	   or hardcode values in media queries.
	   
	   Usage in JavaScript:
	   - const isMobile = window.innerWidth < parseInt(getComputedStyle(document.documentElement).getPropertyValue('--gtaw-breakpoint-md'));
	   
	   Usage in CSS (hardcoded):
	   - @media (min-width: 768px) { ... }
	   
	   Breakpoints:
	   - sm: 480px (mobile landscape)
	   - md: 768px (tablet)
	   - lg: 1024px (desktop)
	   - xl: 1280px (large desktop)
	 */
	--gtaw-breakpoint-sm: 480px;
	--gtaw-breakpoint-md: 768px;
	--gtaw-breakpoint-lg: 1024px;
	--gtaw-breakpoint-xl: 1280px;
}

/* ============================================
   Accessibility Overrides
   ============================================
   These media queries automatically adjust
   design tokens based on user preferences.
   ============================================ */

/* High Contrast Mode Support
   Automatically increases contrast for users
   who prefer high contrast displays.
 */
@media (prefers-contrast: high) {
	:root {
		--gtaw-color-border: #000000;
		--gtaw-color-text: #000000;
		--gtaw-color-text-secondary: #000000;
		--gtaw-focus-width: 3px;
	}
}

/* Reduced Motion Support
   Minimizes animations for users who prefer
   reduced motion. Respects accessibility preferences.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--gtaw-transition-fast: 0.01ms;
		--gtaw-transition-base: 0.01ms;
		--gtaw-transition-slow: 0.01ms;
	}
}