@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Bebas+Neue&display=swap');

:root {
  --color-background: #fbfaf7;
  --color-foreground: #1f2937;
  --color-card: #ffffff;
  --color-card-foreground: #1f2937;
  --color-popover: #ffffff;
  --color-popover-foreground: #1f2937;

  --color-primary: #2b2f36;
  --color-primary-foreground: #fbfaf7;

  --color-secondary: #df8035;
  --color-secondary-foreground: #ffffff;

  --color-muted: #f1efeb;
  --color-muted-foreground: #6c7280;

  --color-accent: #fbcc1d;
  --color-accent-foreground: #1f2937;

  --color-border: #e3ddd1;
  --color-input: #e3ddd1;
  --color-ring: #df8035;

  --color-copper: #df8035;
  --color-copper-dark: #b3631f;
  --color-charcoal: #2b2f36;
  --color-charcoal-light: #4d525b;
  --color-slate: #7d828d;
  --color-cream: #f5f0e6;
  --color-gold: #fbcc1d;
  --color-gold-dark: #e3b412;

  --gradient-hero: linear-gradient(135deg, hsl(220 15% 15% / 0.9), hsl(220 15% 25% / 0.7));
  --gradient-copper: linear-gradient(135deg, hsl(28 75% 55%), hsl(28 70% 40%));
  --gradient-gold: linear-gradient(135deg, hsl(45 95% 55%), hsl(42 90% 45%));
  --gradient-dark: linear-gradient(180deg, hsl(220 15% 20%), hsl(220 15% 12%));

  --shadow-sm: 0 2px 8px hsl(220 15% 20% / 0.08);
  --shadow-md: 0 4px 20px hsl(220 15% 20% / 0.12);
  --shadow-lg: 0 8px 40px hsl(220 15% 20% / 0.15);
  --shadow-copper: 0 4px 20px hsl(28 75% 55% / 0.3);
  --shadow-gold: 0 4px 20px hsl(45 95% 55% / 0.4);

  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --radius: 0.5rem;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

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

.shadow-copper { box-shadow: var(--shadow-copper); }
.shadow-gold { box-shadow: var(--shadow-gold); }

.industrial-texture {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

@keyframes triplem-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes triplem-slide-in-left {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes triplem-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-triplem-fade-in { animation: triplem-fade-in 0.6s ease-out forwards; }
.animate-triplem-slide-in-left { animation: triplem-slide-in-left 0.6s ease-out forwards; }
.animate-triplem-scale-in { animation: triplem-scale-in 0.5s ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  .animate-triplem-fade-in,
  .animate-triplem-slide-in-left,
  .animate-triplem-scale-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Package surface overrides — keep package components inside the triplem palette */
:root {
    --stb-service-accent:        var(--color-charcoal);
    --stb-service-icon-color:    var(--color-copper);
    --stb-services-grid-gap:     1.5rem;
    --stb-service-card-radius:   12px;

    /* Contact package palette (real var names from @stb-contact CSS) */
    --stb-contact-accent:       var(--color-charcoal);
    --stb-contact-field-border: var(--color-border);
    --stb-contact-text:         var(--color-foreground);
    --stb-contact-card-bg:      #ffffff;

    /* Search package palette */
    --stb-search-box-accent:    var(--color-copper);
    --stb-search-box-border:    var(--color-border);
    --stb-search-box-text:      var(--color-foreground);

    /* Service-coverage matrix palette */
    --stb-coverage-full-bg:     var(--color-copper);
    --stb-coverage-partial-bg:  var(--color-gold);
    --stb-coverage-border:      var(--color-border);
    --stb-coverage-header-bg:   var(--color-cream);
    --stb-coverage-text:        var(--color-foreground);

    /* Portfolio palette */
    --stb-portfolio-accent:     var(--color-copper);
    --stb-portfolio-text-muted: var(--color-muted-foreground);

    /* Testimonials palette */
    --stb-testimonial-accent:       var(--color-copper);
    --stb-testimonial-quote-color:  var(--color-foreground);
    --stb-testimonials-grid-gap:    1.5rem;

    /* Photo gallery palette */
    --stb-gallery-accent:       var(--color-charcoal);

    /* Service-areas palette */
    --stb-service-area-accent:      var(--color-charcoal);
    --stb-service-area-text:        var(--color-foreground);
    --stb-service-area-text-muted:  var(--color-muted-foreground);
}