/**
 * Automuseums Brand Design System Variables
 * 
 * CSS Custom Properties for consistent theming across all museum templates.
 * Based on the official Automuseums Design Guide.
 * 
 * @package Astra-Child
 * @since 1.0.0
 * @author Synergy Marketing info@synergymarekting.mk
 */

:root {
  /* === BRAND COLOR PALETTE === */
  
  /* Primary Colors */
  --am-heritage-blue: #1F3A60;    /* Headers, navigation, section titles */
  --am-steel-gray: #5A5A5A;       /* Body text, metadata, borders */
  --am-ivory-white: #F7F7F5;      /* Page background, content areas */
  --am-engine-red: #C4312A;       /* Primary CTAs, active states */
  --am-amber-yellow: #FFB400;     /* Hover states, special highlights */
  --am-racing-green: #214F3D;     /* Accent color for special elements */
  
  /* Color Variations for Better UX */
  --am-heritage-blue-light: #2A4F80;
  --am-heritage-blue-dark: #152B47;
  --am-steel-gray-light: #7A7A7A;
  --am-steel-gray-dark: #3A3A3A;
  --am-engine-red-light: #D84A43;
  --am-engine-red-dark: #A02621;
  --am-amber-yellow-light: #FFCC33;
  --am-amber-yellow-dark: #E6A200;
  
  /* Semantic Colors */
  --am-success: #28a745;
  --am-warning: var(--am-amber-yellow);
  --am-error: var(--am-engine-red);
  --am-info: var(--am-heritage-blue);
  
  /* === TYPOGRAPHY === */
  
  /* Font Families */
  --am-font-heading: 'Merriweather', 'Georgia', serif;
  --am-font-body: 'Lato', 'Helvetica Neue', sans-serif;
  --am-font-mono: 'Monaco', 'Consolas', monospace;
  
  /* Font Weights */
  --am-weight-normal: 400;
  --am-weight-medium: 500;
  --am-weight-semibold: 600;
  --am-weight-bold: 700;
  
  /* Font Sizes */
  --am-text-xs: 0.75rem;    /* 12px */
  --am-text-sm: 0.875rem;   /* 14px */
  --am-text-base: 1rem;     /* 16px */
  --am-text-lg: 1.125rem;   /* 18px */
  --am-text-xl: 1.25rem;    /* 20px */
  --am-text-2xl: 1.5rem;    /* 24px */
  --am-text-3xl: 1.875rem;  /* 30px */
  --am-text-4xl: 2.25rem;   /* 36px */
  --am-text-5xl: 3rem;      /* 48px */
  
  /* Line Heights */
  --am-leading-tight: 1.25;
  --am-leading-normal: 1.5;
  --am-leading-relaxed: 1.75;
  
  /* === SPACING & LAYOUT === */
  
  /* Spacing Scale */
  --am-space-xs: 0.25rem;   /* 4px */
  --am-space-sm: 0.5rem;    /* 8px */
  --am-space-md: 1rem;      /* 16px */
  --am-space-lg: 1.5rem;    /* 24px */
  --am-space-xl: 2rem;      /* 32px */
  --am-space-2xl: 3rem;     /* 48px */
  --am-space-3xl: 4rem;     /* 64px */
  
  /* Border Radius */
  --am-radius-sm: 0.125rem;  /* 2px */
  --am-radius-md: 0.25rem;   /* 4px */
  --am-radius-lg: 0.5rem;    /* 8px */
  --am-radius-xl: 1rem;      /* 16px */
  
  /* Shadows */
  --am-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --am-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --am-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --am-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* === BREAKPOINTS === */
  /* Note: CSS custom properties can't be used in media queries directly */
  /* These are documented for reference */
  /*
  --am-breakpoint-sm: 640px;
  --am-breakpoint-md: 768px;
  --am-breakpoint-lg: 1024px;
  --am-breakpoint-xl: 1280px;
  --am-breakpoint-2xl: 1536px;
  */
  
  /* === TRANSITIONS === */
  
  /* Duration */
  --am-duration-fast: 150ms;
  --am-duration-normal: 300ms;
  --am-duration-slow: 500ms;
  
  /* Easing */
  --am-ease-in: ease-in;
  --am-ease-out: ease-out;
  --am-ease-in-out: ease-in-out;
  --am-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* === COMPONENT-SPECIFIC VARIABLES === */
  
  /* Museum Cards */
  --am-card-bg: var(--am-ivory-white);
  --am-card-border: var(--am-steel-gray-light);
  --am-card-accent: var(--am-heritage-blue);
  --am-card-padding: var(--am-space-lg);
  --am-card-radius: var(--am-radius-lg);
  --am-card-shadow: var(--am-shadow-sm);
  --am-card-shadow-hover: var(--am-shadow-lg);
  
  /* Buttons */
  --am-btn-primary-bg: var(--am-engine-red);
  --am-btn-primary-hover: var(--am-amber-yellow);
  --am-btn-primary-text: #ffffff;
  --am-btn-secondary-bg: var(--am-steel-gray);
  --am-btn-secondary-hover: var(--am-heritage-blue);
  --am-btn-secondary-text: #ffffff;
  --am-btn-padding-x: var(--am-space-lg);
  --am-btn-padding-y: var(--am-space-sm);
  --am-btn-radius: var(--am-radius-md);
  
  /* Navigation */
  --am-nav-bg: var(--am-heritage-blue);
  --am-nav-text: #ffffff;
  --am-nav-hover: var(--am-amber-yellow);
  --am-nav-active: var(--am-engine-red);
  
  /* Hero Section */
  --am-hero-overlay: transparent;
  --am-hero-text: #ffffff;
  --am-hero-min-height: 60vh;
  
  /* Map Elements */
  --am-map-marker: var(--am-engine-red);
  --am-map-cluster: var(--am-heritage-blue);
  --am-map-hover: var(--am-amber-yellow);
  --am-map-border: var(--am-steel-gray);
  
  /* Social Links */
  --am-social-bg: var(--am-steel-gray);
  --am-social-hover: var(--am-engine-red);
  --am-social-text: #ffffff;
  
  /* Forms */
  --am-form-bg: #ffffff;
  --am-form-border: var(--am-steel-gray-light);
  --am-form-focus: var(--am-heritage-blue);
  --am-form-error: var(--am-error);
  --am-form-success: var(--am-success);
}

/* === DARK MODE SUPPORT (Optional) === */
@media (prefers-color-scheme: dark) {
  :root {
    --am-ivory-white: #1a1a1a;
    --am-steel-gray: #d4d4d4;
    --am-card-bg: #2a2a2a;
    --am-form-bg: #2a2a2a;
  }
}

/* === HIGH CONTRAST MODE SUPPORT === */
@media (prefers-contrast: high) {
  :root {
    --am-steel-gray: #000000;
    --am-heritage-blue: #000080;
    --am-engine-red: #8B0000;
  }
}

/* === REDUCED MOTION SUPPORT === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --am-duration-fast: 0ms;
    --am-duration-normal: 0ms;
    --am-duration-slow: 0ms;
  }
}