/* Munero Limited - Custom CSS for Enterprise-Grade Design */

/* ============================================
   TYPOGRAPHY SYSTEM
   ============================================ */

/* Typography Variables */
:root {
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Primary Colors */
  --color-primary: #000000;
  --color-background: #ffffff;

  /* Brand Accent - Artisan Theme */
  --color-accent: var(--color-artisan-primary); /* Terracotta */
  --color-accent-dark: var(--color-artisan-warm-dark); /* Burnt Sienna */
  --color-accent-light: #F0A592; /* Light Terracotta */
  --color-accent-lightest: #DBEAFE; /* Blue 100 */

  /* Semantic Colors */
  --color-success: #10B981; /* Green 500 */
  --color-error: #EF4444; /* Red 500 */
  --color-warning: #F59E0B; /* Amber 500 */

  /* ============================================
     ARTISAN COLOR PALETTE
     ============================================ */

  /* Primary Artisan Colors */
  --color-artisan-primary: #E07A5F;    /* Terracotta - Main accent */
  --color-artisan-secondary: #F2CC8F;  /* Ochre Gold - Highlights */
  --color-artisan-accent: #81B29A;     /* Sage Green - Balance */
  --color-artisan-deep: #3D405B;       /* Charcoal - Depth */

  /* Vibrant Accent Colors */
  --color-artisan-warm: #FF6B35;       /* Burnt Orange - Energy */
  --color-artisan-coral: #FF6B6B;      /* Coral - Vibrancy */
  --color-artisan-amber: #F7931E;      /* Golden Amber - Warmth */
  --color-artisan-teal: #2A9D8F;       /* Teal - Craftsmanship */
  --color-artisan-purple: #6A4C93;     /* Royal Purple - Luxury */

  /* Hover State Darkened Versions */
  --color-artisan-warm-dark: #C65D3B;     /* Burnt Sienna */
  --color-artisan-coral-dark: #E05555;    /* Dark Coral */
  --color-artisan-amber-dark: #D67E1A;    /* Dark Amber */
  --color-artisan-teal-dark: #237A6F;     /* Dark Teal */
  --color-artisan-purple-dark: #533B6E;   /* Dark Purple */

  /* Artisan Gradients */
  --gradient-artisan-warm: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  --gradient-artisan-hero: linear-gradient(135deg,
    rgba(224, 122, 95, 0.08) 0%,    /* Terracotta */
    rgba(242, 204, 143, 0.12) 50%,  /* Ochre */
    rgba(255, 255, 255, 0) 100%
  );
  --gradient-artisan-text: linear-gradient(135deg,
    #000000 0%,      /* Brand Black */
    #E07A5F 70%,     /* Terracotta */
    #F2CC8F 100%     /* Golden Ochre */
  );
  --gradient-artisan-subtle: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(242, 204, 143, 0.04) 100%  /* Subtle Ochre */
  );

  /* Gradients */
  --gradient-primary: var(--gradient-artisan-warm);
  --gradient-hero: var(--gradient-artisan-hero);
  --gradient-subtle: var(--gradient-artisan-subtle);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,250,251,1) 100%);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Typography Classes */
.font-display {
  font-family: var(--font-display);
  font-feature-settings: 'ss01' on, 'ss02' on;
}

.font-body {
  font-family: var(--font-body);
}

/* Enhanced text rendering */
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================
   COLOR UTILITIES
   ============================================ */

/* Gradient Classes */
.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-hero {
  background: var(--gradient-hero);
}

.bg-gradient-subtle {
  background: var(--gradient-subtle);
}

.bg-gradient-card {
  background: var(--gradient-card);
}

/* Accent Color Utilities */
.text-accent { color: var(--color-accent); }
.text-accent-dark { color: var(--color-accent-dark); }
.text-accent-light { color: var(--color-accent-light); }

.border-accent { border-color: var(--color-accent); }
.border-accent-dark { border-color: var(--color-accent-dark); }

.bg-accent { background-color: var(--color-accent); }
.bg-accent-light { background-color: var(--color-accent-lightest); }

/* Gradient Text Effect */
.text-gradient {
  background: var(--gradient-artisan-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Fallback for unsupported browsers */
@supports not (background-clip: text) {
  .text-gradient {
    color: #000000;
  }
}

/* ============================================
   HERO SECTION STYLING
   ============================================ */

/* Hero Section with Gradient Only */
.hero-section {
  background: var(--gradient-hero);
}

/* ============================================
   ICON SYSTEM
   ============================================ */

/* Service Icon Styling */
.service-icon {
  width: 48px;
  height: 48px;
  color: var(--color-accent);
  margin-bottom: 1rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.1) translateY(-2px);
  color: var(--color-accent-dark);
}

/* ============================================
   SERVICE CARD UNIQUE ARTISAN COLORS
   ============================================ */

/* Web & App Development - Royal Purple */
.service-card:nth-child(1) .service-icon {
  color: var(--color-artisan-purple);
}

.service-card:nth-child(1):hover .service-icon {
  color: var(--color-artisan-purple-dark);
}

/* Mobile Applications - Coral */
.service-card:nth-child(2) .service-icon {
  color: var(--color-artisan-coral);
}

.service-card:nth-child(2):hover .service-icon {
  color: var(--color-artisan-coral-dark);
}

/* AI & Automation - Golden Amber */
.service-card:nth-child(3) .service-icon {
  color: var(--color-artisan-amber);
}

.service-card:nth-child(3):hover .service-icon {
  color: var(--color-artisan-amber-dark);
}

/* Fabrication Services - Teal */
.service-card:nth-child(4) .service-icon {
  color: var(--color-artisan-teal);
}

.service-card:nth-child(4):hover .service-icon {
  color: var(--color-artisan-teal-dark);
}

/* ============================================
   COMPONENT ENHANCEMENTS
   ============================================ */

/* Premium Card Styling */
.service-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-artisan-primary);
}

/* Button Enhancements */
.btn-primary {
  background: var(--gradient-primary);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  transition: all 0.3s ease;
  position: relative;
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Fade In Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Stagger Animation Delays */
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Mobile optimizations */
@media (max-width: 640px) {
  /* Disable hover transforms on mobile */
  .service-card {
    transform: none !important;
  }

  .service-card:hover {
    transform: none !important;
  }

  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none !important;
  }

  /* Optimize hero text for mobile */
  .text-gradient {
    font-size: 2.5rem; /* 40px */
    line-height: 1.2;
  }

  /* Improve touch targets */
  button,
  a,
  input,
  textarea {
    min-height: 44px;
  }

  /* Optimize spacing for mobile */
  .hero-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Optimize grid layouts for tablets */
  .service-card {
    min-height: 280px;
  }
}

/* Large screen optimizations */
@media (min-width: 1536px) {
  /* Prevent excessive width on large screens */
  .hero-section,
  section {
    max-width: 1536px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Performance: Reduce animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .btn-primary,
  .btn-secondary,
  .service-icon {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

/* GPU acceleration for animations */
.service-card,
.btn-primary,
.btn-secondary,
.service-icon {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize image rendering */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Prevent layout shift */
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Loading state for images */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .bg-gradient-primary,
  .bg-gradient-hero,
  .text-gradient {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #000000 !important;
  }

  /* Hide non-essential elements */
  nav,
  footer,
  .btn-primary,
  .btn-secondary {
    display: none;
  }

  /* Optimize for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000000;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }
}