/* ==========================================================================
   AuraClean - Minimalist Blue & Modern UI Design System
   Santa Maria da Feira | Doméstica & Industrial
   ========================================================================== */

:root {
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Clean Blue Brand System */
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-300: #7dd3fc;
  --color-brand-400: #38bdf8;
  --color-brand-500: #0ea5e9;
  --color-brand-600: #0284c7;
  --color-brand-700: #0369a1;
  --color-brand-800: #075985;
  --color-brand-900: #082f49;
  --color-brand-950: #0c1e2e;

  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #475569;
  --color-slate-400: #64748b;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;
  --color-slate-50: #f8fafc;
  --color-white: #ffffff;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  --shadow-card: 0 4px 14px -2px rgba(2, 132, 199, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --shadow-hover: 0 14px 28px -4px rgba(2, 132, 199, 0.16), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
}

/* Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  color: var(--color-slate-800);
  background-color: var(--color-slate-50);
}

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

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

/* Minimalist Glass Navigation */
.glass-nav {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

/* Minimalist UI Icon Containers (No Colorful Clutter) */
.icon-ui {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  border: 1px solid var(--color-brand-100);
  flex-shrink: 0;
}

.icon-ui-subtle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-slate-100);
  color: var(--color-slate-700);
  border: 1px solid var(--color-slate-200);
  flex-shrink: 0;
}

.icon-ui-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-brand-300);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* Minimalist Badges with Blue Accent */
.badge-blue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  border: 1px solid var(--color-brand-200);
}

.badge-blue-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(2, 132, 199, 0.15);
  color: var(--color-brand-300);
  border: 1px solid rgba(2, 132, 199, 0.3);
}

/* Cards */
.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-brand-300);
}

/* Clean Blue Buttons */
.btn-primary {
  background-color: var(--color-brand-600);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  background-color: var(--color-brand-700);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(2, 132, 199, 0.35);
}

.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-slate-800);
  border: 1px solid var(--color-slate-300);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-secondary:hover {
  background-color: var(--color-brand-50);
  border-color: var(--color-brand-400);
  color: var(--color-brand-800);
}

/* Mobile Bottom Navigation */
.mobile-bottom-bar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-slate-200);
}

/* Explicit Background & Color Fallbacks for Reliability */
.bg-brand-950 { background-color: var(--color-brand-950) !important; }
.bg-brand-900 { background-color: var(--color-brand-900) !important; }
.bg-brand-800 { background-color: var(--color-brand-800) !important; }
.bg-brand-600 { background-color: var(--color-brand-600) !important; }
.bg-brand-50  { background-color: var(--color-brand-50) !important; }
.bg-slate-950 { background-color: #020617 !important; }
.bg-slate-900 { background-color: #0f172a !important; }
.bg-slate-800 { background-color: #1e293b !important; }

.text-brand-100 { color: var(--color-brand-100) !important; }
.text-brand-200 { color: var(--color-brand-200) !important; }
.text-brand-300 { color: var(--color-brand-300) !important; }
.text-brand-400 { color: var(--color-brand-400) !important; }
.text-brand-600 { color: var(--color-brand-600) !important; }
.text-brand-700 { color: var(--color-brand-700) !important; }
.text-brand-800 { color: var(--color-brand-800) !important; }
.text-brand-900 { color: var(--color-brand-900) !important; }

.border-brand-800 { border-color: var(--color-brand-800) !important; }
.border-brand-700 { border-color: var(--color-brand-700) !important; }
.border-brand-600 { border-color: var(--color-brand-600) !important; }
.border-brand-200 { border-color: var(--color-brand-200) !important; }
.border-slate-800 { border-color: #1e293b !important; }
.border-slate-700 { border-color: #334155 !important; }