/**
 * Brand Variables - Shared CSS Custom Properties
 * Central source of truth for colors, spacing, typography, and other design tokens
 * Used across all header component CSS files
 */

:root {
  /* ===================================================================
     CORE COLORS - Single source of truth
     =================================================================== */
  
  /* Base colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-accent: #f6d55a;
  --color-accent-hover: #fbc44e;
  
  /* Grey scale - unified progression */
  --color-grey-100: #1a1a1a;
  --color-grey-200: #2a2a2a;
  --color-grey-300: #333333;
  --color-grey-400: #403f3f;
  --color-grey-500: #444444;
  --color-grey-600: #666666;
  --color-grey-700: #999999;
  --color-grey-800: #cccccc;
  
  /* Semantic mappings */
  --bg-primary: var(--color-black);
  --bg-secondary: var(--color-grey-100);
  --bg-tertiary: var(--color-grey-200);
  --bg-hover: var(--color-grey-300);
  --bg-active: var(--color-grey-500);
  
  /* Danger color for alerts/errors */
  --color-danger: #dc3545;
  
  --text-primary: var(--color-white);
  --text-secondary: var(--color-grey-800);
  --text-muted: var(--color-grey-700);
  
  --border-primary: var(--color-grey-400);
  --border-secondary: var(--color-grey-300);
  --border-light: var(--color-grey-600);
  
  --backdrop: rgba(0, 0, 0, 0.7);
  
  /* ===================================================================
     SPACING SYSTEM
     =================================================================== */
  
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  
  /* ===================================================================
     TYPOGRAPHY
     =================================================================== */
  
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 18px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  
  /* ===================================================================
     TRANSITIONS & ANIMATIONS
     =================================================================== */
  
  --transition-fast: 0.2s ease;
  --transition-medium: 0.25s ease;
  
  /* ===================================================================
     Z-INDEX LAYERS
     =================================================================== */
  
  --z-base: 10;
  --z-dropdown: 15;
  --z-header: 20;
  --z-modal: 30;
  --z-modal-panel: 31;
  
  /* ===================================================================
     MEDIA QUERY BREAKPOINTS
     =================================================================== */
  
  --breakpoint-xs: 375px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  
  /* ===================================================================
     CONTAINER MAX WIDTHS
     =================================================================== */
  
  --container-xs: 100%;
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;
  --container-max: 1340px;
  --container-nav: 1310px;
  
  /* ===================================================================
     TOUCH TARGET SIZES
     =================================================================== */
  
  --touch-target-min: 44px;  /* WCAG 2.1 minimum */
  --touch-target-preferred: 48px;
  --touch-target-compact: 36px;
  
  /* ===================================================================
     BORDER RADIUS
     =================================================================== */
  
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 50%;
  
  /* ===================================================================
     BOX SHADOWS
     =================================================================== */
  
  --shadow-none: none;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.3);
  
  /* ===================================================================
     FOCUS STATES
     =================================================================== */
  
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-outline-color: var(--color-accent);
  --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
  
  /* ===================================================================
     COMPONENT Z-INDEX LAYERS - Simplified
     =================================================================== */
  
  --z-header-top: var(--z-header);
  --z-nav: var(--z-dropdown);
  --z-mobile-backdrop: var(--z-modal);
  --z-mobile-panel: var(--z-modal-panel);
}