/**
 * 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 === */
  /* Updated to match Design Agent brand standards (January 2026) */

  /* Primary Colors - Design Agent Standard */
  --am-brand-blue: #2563EB;       /* Primary brand color - buttons, links, CTAs */
  --am-dark: #1F2937;             /* Dark gray - headings, navigation */
  --am-gray: #6B7280;             /* Medium gray - body text, metadata */
  --am-light: #F3F4F6;            /* Light gray - backgrounds, cards */
  --am-white: #FFFFFF;            /* Pure white - content areas */
  --am-border: #E5E7EB;           /* Border color */

  /* Legacy Color Aliases (for backward compatibility) */
  --am-heritage-blue: var(--am-dark);        /* Now maps to dark gray */
  --am-steel-gray: var(--am-gray);           /* Now maps to medium gray */
  --am-ivory-white: var(--am-light);         /* Now maps to light gray */
  --am-engine-red: var(--am-brand-blue);     /* Now maps to brand blue */
  --am-amber-yellow: #3B82F6;                /* Now maps to light blue */
  --am-racing-green: var(--am-brand-blue);   /* Now maps to brand blue */

  /* Color Variations for Better UX */
  --am-brand-blue-light: #3B82F6;   /* Lighter blue for accents */
  --am-brand-blue-dark: #1D4ED8;    /* Darker blue for hover states */
  --am-dark-light: #374151;         /* Lighter dark */
  --am-dark-dark: #111827;          /* Darker dark */
  --am-gray-light: #9CA3AF;         /* Lighter gray */
  --am-gray-dark: #4B5563;          /* Darker gray */

  /* Legacy variations (mapped to new system) */
  --am-heritage-blue-light: var(--am-dark-light);
  --am-heritage-blue-dark: var(--am-dark-dark);
  --am-steel-gray-light: var(--am-gray-light);
  --am-steel-gray-dark: var(--am-gray-dark);
  --am-engine-red-light: var(--am-brand-blue-light);
  --am-engine-red-dark: var(--am-brand-blue-dark);
  --am-amber-yellow-light: var(--am-brand-blue-light);
  --am-amber-yellow-dark: var(--am-brand-blue-dark);
  
  /* Semantic Colors */
  --am-success: #10B981;              /* Green for success states */
  --am-warning: #F59E0B;              /* Amber for warnings */
  --am-error: #EF4444;                /* Red for errors */
  --am-info: var(--am-brand-blue);    /* Blue for info messages */

  /* === TYPOGRAPHY === */
  /* Updated to Design Agent standards - Inter font throughout */

  /* Font Families */
  --am-font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --am-font-body: 'Inter', system-ui, -apple-system, 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 - Design Agent Standards */
  --am-radius-sm: 0.25rem;   /* 4px - small */
  --am-radius-md: 0.5rem;    /* 8px - medium */
  --am-radius-lg: 0.75rem;   /* 12px - large */
  --am-radius-xl: 1rem;      /* 16px - extra large */
  
  /* 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-white);
  --am-card-border: var(--am-border);
  --am-card-accent: var(--am-brand-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 - Design Agent Standards */
  --am-btn-primary-bg: var(--am-brand-blue);
  --am-btn-primary-hover: var(--am-brand-blue-dark);
  --am-btn-primary-text: var(--am-white);
  --am-btn-secondary-bg: var(--am-white);
  --am-btn-secondary-hover: var(--am-brand-blue);
  --am-btn-secondary-text: var(--am-brand-blue);
  --am-btn-padding-x: var(--am-space-lg);
  --am-btn-padding-y: var(--am-space-md);
  --am-btn-radius: var(--am-radius-md);

  /* Navigation */
  --am-nav-bg: var(--am-white);
  --am-nav-text: var(--am-dark);
  --am-nav-hover: var(--am-brand-blue);
  --am-nav-active: var(--am-brand-blue);

  /* Hero Section */
  --am-hero-overlay: rgba(31, 41, 55, 0.5);
  --am-hero-text: var(--am-white);
  --am-hero-min-height: 60vh;

  /* Map Elements */
  --am-map-marker: var(--am-brand-blue);
  --am-map-cluster: var(--am-dark);
  --am-map-hover: var(--am-brand-blue-light);
  --am-map-border: var(--am-border);

  /* Social Links */
  --am-social-bg: var(--am-gray);
  --am-social-hover: var(--am-brand-blue);
  --am-social-text: var(--am-white);

  /* Forms */
  --am-form-bg: var(--am-white);
  --am-form-border: var(--am-border);
  --am-form-focus: var(--am-brand-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;
  }
}