/**
 * HIC Brand Styles - Halleluyah Its Clean
 * Sourced from: HIC OS/config/brand_profile.yaml
 * Schema version: 2
 */

/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Brand Colors */
  --color-primary: #1366FE;  /* Blue - Primary brand color */
  --color-primary-dark: #0E4FC2;  /* Darker blue for hover states */
  --color-secondary: #7DD7EA;  /* Light Teal/Cyan - Accent (decorative only) */
  --color-accessible-teal: #0E5A6D;  /* Dark Teal - For text on white (WCAG 7.5:1) */

  /* Text Colors */
  --color-heading: #1366FE;  /* Blue headings */
  --color-text: #000000;  /* Black body text */
  --color-text-muted: #666666;  /* Gray for secondary text */

  /* Background Colors */
  --color-background: #FFFFFF;  /* White */
  --color-background-muted: #F9FAFB;  /* Light gray */

  /* UI Colors */
  --color-border: #E5E7EB;  /* Light gray border */
  --color-error: #EF4444;  /* Red for errors */
  --color-success: #10B981;  /* Green for success */

  /* Typography */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Helvetica Neue', Arial, sans-serif;
}

/* Brand-Specific Typography Overrides */
body {
  font-weight: 400;  /* Regular */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;  /* Semi-bold */
  color: var(--color-primary);  /* Blue headings */
}

.tagline {
  font-weight: 300;  /* Light */
  font-style: italic;
  color: var(--color-text-muted);
}

/* Brand-Specific Button Styles */
.btn-primary {
  background-color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.025em;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

/* Brand Header (Standalone Forms) */
.form-header {
  border-bottom: 2px solid var(--color-background-muted);
  padding-bottom: var(--space-xl);
}

.form-tagline {
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Brand Footer (Standalone Forms) */
.form-footer {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  margin-top: var(--space-2xl);
  border-top: 2px solid var(--color-background-muted);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.form-footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.form-footer-links a {
  color: var(--color-accessible-teal);
  text-decoration: none;
}

.form-footer-links a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Brand Accent Elements */
.accent-line {
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 2px;
  margin: var(--space-md) 0;
}

.icon-accent {
  color: var(--color-secondary);  /* Decorative icons only */
}

/* Proof Points / Trust Badges */
.trust-badges {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background-color: var(--color-background-muted);
  border-radius: var(--radius-md);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-text);
}

.trust-badge-icon {
  width: 20px;
  height: 20px;
  color: var(--color-success);
}

/* CTA Styling */
.cta-primary {
  background-color: var(--color-primary);
  color: white;
  padding: var(--space-lg) var(--space-2xl);
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.cta-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -5px rgba(19, 102, 254, 0.3);
}

/* Success Message Branding */
.success-message {
  text-align: center;
  padding: var(--space-2xl);
}

.success-message h2 {
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-lg);
  color: var(--color-success);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .trust-badges {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-footer-links {
    flex-direction: column;
    gap: var(--space-sm);
  }
}