/* Sacramento Water Main Design Tokens - Utah UX Enhanced */
/* Professional Color Psychology & Typography System */

/* Google Fonts Import - Utah Roboto System */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
  /* Utah-Inspired Professional Color Palette */
  --water-main-primary: #002B5C;        /* Authority & Trust - Utah Dark Blue */
  --water-main-secondary: #457B9D;      /* Visual Hierarchy - Utah Light Blue */
  --water-main-accent: #FFC107;         /* CTAs & Highlights - Utah Gold */
  --water-main-success: #2E7D32;        /* Repair Green */
  --water-main-warning: #F57F17;        /* Caution Yellow */
  --water-main-emergency: #D32F2F;      /* Emergency Red */

  /* Content Colors - Utah Readability System */
  --text-primary: #333333;              /* High Readability Body Text */
  --text-secondary: #666666;            /* Supporting Information */
  --text-light: #999999;                /* Subtle Information */

  /* Background System - Utah Clean Architecture */
  --bg-clean: #FFFFFF;                  /* Main Content Areas */
  --bg-section: #F8F9FA;                /* Alternating Sections */
  --bg-accent: #FFF8E1;                 /* Highlighted Content */

  /* Interactive States - Utah Professional */
  --hover-dark: #001a3d;                /* Button Hover States */
  --border-light: #E0E0E0;              /* Section Dividers */

  /* Utah Typography System */
  --water-main-heading-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --water-main-body-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --water-main-heading-weight: 700;
  --water-main-body-weight: 400;
  
  /* Water Main Service Spacing */
  --water-main-spacing-xs: 0.5rem;
  --water-main-spacing-sm: 1rem;
  --water-main-spacing-md: 1.5rem;
  --water-main-spacing-lg: 2rem;
  --water-main-spacing-xl: 3rem;
  
  /* Utah Professional Components */
  --water-main-hero-bg: linear-gradient(135deg, var(--water-main-primary), var(--water-main-secondary));
  --water-main-card-shadow: 0 4px 16px rgba(0, 43, 92, 0.1);
  --water-main-button-radius: 6px;          /* Utah standard radius */
  --water-main-card-radius: 8px;            /* Utah card radius */

  /* Utah Gold CTA System */
  --utah-cta-primary: linear-gradient(135deg, var(--water-main-accent), #FFB300);
  --utah-cta-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
  --utah-cta-hover-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);

  /* Emergency Service Colors */
  --emergency-cta-bg: var(--water-main-emergency);
  --emergency-cta-text: white;
  --emergency-phone-color: var(--water-main-emergency);
}

/* Water Main Business Type Theming */
[data-business-type="water_main"] {
  --primary-color: var(--water-main-primary);
  --secondary-color: var(--water-main-secondary);
  --accent-color: var(--water-main-accent);
  --success-color: var(--water-main-success);
  --warning-color: var(--water-main-warning);
  --emergency-color: var(--water-main-emergency);
}

/* Service-Specific Component Styling */
[data-business-type="water_main"] .hero-section {
  background: var(--water-main-hero-bg);
  color: white;
}

[data-business-type="water_main"] .service-card {
  border: 1px solid rgba(21, 101, 192, 0.2);
  box-shadow: var(--water-main-card-shadow);
  border-radius: var(--water-main-card-radius);
}

[data-business-type="water_main"] .cta-button {
  background: var(--utah-cta-primary);
  color: var(--water-main-primary);
  border: none;
  border-radius: var(--water-main-button-radius);
  font-weight: var(--water-main-heading-weight);
  padding: 1rem 2rem;
  font-size: 1.125rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: var(--utah-cta-shadow);
}

[data-business-type="water_main"] .cta-button:hover {
  background: linear-gradient(135deg, #FFB300, var(--water-main-accent));
  transform: translateY(-2px);
  box-shadow: var(--utah-cta-hover-shadow);
}

[data-business-type="water_main"] .emergency-cta {
  background: var(--emergency-cta-bg);
  color: var(--emergency-cta-text);
  border-left: 4px solid var(--water-main-accent);
}

[data-business-type="water_main"] .phone-number {
  color: var(--emergency-phone-color);
  font-weight: var(--water-main-heading-weight);
}