/**
 * Herencia Rosario Insurance — Systematic Design Tokens & Utilities
 * Version 1.1.0
 * 
 * Single source of truth for colors, typography, spacing, elevations, radii,
 * and semantic light/dark themes.
 */

:root {
  color-scheme: light;

  /* ==========================================================================
     1. SEMANTIC THEME TOKENS — LIGHT MODE (DEFAULT)
     ========================================================================== */

  /* Surfaces & Backgrounds */
  --hr-color-page-bg: #F8FAFC;
  --hr-color-surface-bg: #EEF2F6;
  --hr-color-card-bg: #FFFFFF;
  --hr-color-card-hover-bg: #FAF8F3;
  --hr-color-elevated-bg: #FFFFFF;
  --hr-color-header-bg: rgba(248, 250, 252, 0.92);
  --hr-color-footer-bg: #131B3B;
  --hr-color-white: #FFFFFF;

  /* Typography / Neutrals */
  --hr-color-text-primary: #1E2A5A;
  --hr-color-text-secondary: #3D4760;
  --hr-color-text-muted: #5A6780;
  --hr-color-text-inverse: #FFFFFF;

  /* Brand Ochre / Gold Accents */
  --hr-color-gold-deep: #7D6426;
  --hr-color-gold-warm: #7D6426; /* High-contrast gold accent for light mode (WCAG AA compliant >= 4.5:1 on light surfaces) */
  --hr-color-gold-raw: #C5A866;
  --hr-color-gold-accent: #C7A45C;
  --hr-color-gold-light: #E5D4A6;
  --hr-color-gold-subtle: #FFF9ED;
  --hr-color-gold-border: #FFE0B2;
  --hr-color-gold-glow: rgba(199, 164, 92, 0.25);

  /* Borders & Dividers */
  --hr-color-border-subtle: rgba(30, 42, 90, 0.08);
  --hr-color-border-medium: rgba(30, 42, 90, 0.14);
  --hr-color-border-strong: rgba(30, 42, 90, 0.25);

  /* Form Inputs & Controls */
  --hr-color-input-bg: #FFFFFF;
  --hr-color-input-border: #CBD5E1;
  --hr-color-input-text: #1E2A5A;
  --hr-color-focus-ring: #7D6426;

  /* Interactive Buttons */
  --hr-color-btn-primary-bg: #1E2A5A;
  --hr-color-btn-primary-hover: #2B3A75;
  --hr-color-btn-primary-text: #FFFFFF;

  /* Feedback & Validation */
  --hr-color-feedback-success: #2E7D32;
  --hr-color-feedback-success-bg: #E8F5E9;
  --hr-color-feedback-success-border: #A5D6A7;
  --hr-color-feedback-error: #C62828;
  --hr-color-feedback-error-bg: #FFEBEE;
  --hr-color-feedback-error-border: #EF9A9A;
  --hr-color-feedback-warning: #B78103;
  --hr-color-feedback-warning-bg: #FFF8E1;
  --hr-color-feedback-warning-border: #FFE082;
  --hr-color-feedback-info: #1565C0;
  --hr-color-feedback-info-bg: #E3F2FD;
  --hr-color-feedback-info-border: #90CAF9;

  /* Legacy Brand Color Aliases (for backwards compatibility) */
  --hr-color-forest-deep: #17352A;
  --hr-color-forest-dark: #122820;
  --hr-color-forest-base: #1F4638;
  --hr-color-forest-sage: #2B5544;
  --hr-color-forest-light: #3A6E59;
  --hr-color-forest-subtle: rgba(23, 53, 42, 0.08);
  --hr-color-forest-muted: rgba(23, 53, 42, 0.15);
  --hr-color-forest-border: rgba(23, 53, 42, 0.25);
  --hr-color-cream-page: #F6F1E7;
  --hr-color-cream-surface: #EFE8D8;
  --hr-color-cream-border: #E3DAC6;
  --hr-color-cream-crisp: #FAF8F3;
  --hr-color-gold-deep: #7D6426;
  --hr-color-success: var(--hr-color-feedback-success);
  --hr-color-success-bg: var(--hr-color-feedback-success-bg);
  --hr-color-error: var(--hr-color-feedback-error);
  --hr-color-error-bg: var(--hr-color-feedback-error-bg);
  --hr-color-warning: var(--hr-color-feedback-warning);
  --hr-color-warning-bg: var(--hr-color-feedback-warning-bg);

  /* ==========================================================================
     2. TYPOGRAPHY TOKENS
     ========================================================================== */

  --hr-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --hr-font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --hr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Sizes */
  --hr-font-size-xs: 12px;
  --hr-font-size-sm: 14px;
  --hr-font-size-base: 16px;
  --hr-font-size-lg: 18px;
  --hr-font-size-xl: 20px;
  --hr-font-size-2xl: 24px;
  --hr-font-size-3xl: 28px;
  --hr-font-size-4xl: 36px;
  --hr-font-size-5xl: 44px;
  --hr-font-size-6xl: 56px;
  --hr-font-size-7xl: 64px;

  /* Font Weights */
  --hr-font-weight-regular: 400;
  --hr-font-weight-medium: 500;
  --hr-font-weight-semibold: 600;
  --hr-font-weight-bold: 700;

  /* Line Heights */
  --hr-line-height-tight: 1.05;
  --hr-line-height-heading: 1.15;
  --hr-line-height-snug: 1.3;
  --hr-line-height-base: 1.55;
  --hr-line-height-relaxed: 1.7;

  /* Letter Spacing */
  --hr-letter-spacing-tighter: -0.03em;
  --hr-letter-spacing-tight: -0.015em;
  --hr-letter-spacing-normal: 0em;
  --hr-letter-spacing-wide: 0.04em;
  --hr-letter-spacing-wider: 0.08em;

  /* ==========================================================================
     3. SPACING & LAYOUT TOKENS (4px / 8px modular scale)
     ========================================================================== */

  --hr-space-0: 0px;
  --hr-space-1: 4px;
  --hr-space-2: 8px;
  --hr-space-3: 12px;
  --hr-space-4: 16px;
  --hr-space-5: 20px;
  --hr-space-6: 24px;
  --hr-space-8: 32px;
  --hr-space-10: 40px;
  --hr-space-12: 48px;
  --hr-space-16: 64px;
  --hr-space-20: 80px;
  --hr-space-24: 96px;
  --hr-space-32: 128px;

  --hr-container-max: 1180px;
  --hr-container-email: 600px;

  /* ==========================================================================
     4. BORDER RADII TOKENS
     ========================================================================== */

  --hr-radius-none: 0px;
  --hr-radius-sm: 6px;
  --hr-radius-md: 10px;
  --hr-radius-lg: 16px;
  --hr-radius-xl: 20px;
  --hr-radius-2xl: 24px;
  --hr-radius-pill: 9999px;
  --hr-radius-circle: 50%;

  /* ==========================================================================
     5. ELEVATION & SHADOW TOKENS
     ========================================================================== */

  --hr-shadow-sm: 0 1px 3px rgba(30, 42, 90, 0.06);
  --hr-shadow-md: 0 4px 16px rgba(30, 42, 90, 0.06);
  --hr-shadow-lg: 0 10px 25px rgba(30, 42, 90, 0.10);
  --hr-shadow-xl: 0 20px 40px rgba(30, 42, 90, 0.16);
  --hr-shadow-float: 0 20px 40px rgba(30, 42, 90, 0.25);
  --hr-shadow-focus: 0 0 0 3px #7D6426;

  /* ==========================================================================
     6. TRANSITIONS & MOTION
     ========================================================================== */

  --hr-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --hr-transition-base: 200ms ease;
  --hr-transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   7. SEMANTIC THEME TOKENS — DARK MODE
   ========================================================================== */

[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces & Backgrounds */
  --hr-color-page-bg: #0B0F1E;
  --hr-color-surface-bg: #0F1528;
  --hr-color-card-bg: #151D35;
  --hr-color-card-hover-bg: #1B2544;
  --hr-color-elevated-bg: #1B2642;
  --hr-color-header-bg: rgba(11, 15, 30, 0.90);
  --hr-color-footer-bg: #070A14;
  --hr-color-white: #151D35;

  /* Typography / Neutrals */
  --hr-color-text-primary: #F8FAFC;
  --hr-color-text-secondary: #CBD5E1;
  --hr-color-text-muted: #8B9BB4;
  --hr-color-text-inverse: #0B0F1E;

  /* Brand Ochre / Gold Accents */
  --hr-color-gold-warm: #E5D4A6;
  --hr-color-gold-accent: #C7A45C;
  --hr-color-gold-light: #F9F5EA;
  --hr-color-gold-subtle: rgba(199, 164, 92, 0.12);
  --hr-color-gold-border: rgba(199, 164, 92, 0.35);
  --hr-color-gold-glow: rgba(229, 212, 166, 0.20);

  /* Borders & Dividers */
  --hr-color-border-subtle: rgba(203, 213, 225, 0.10);
  --hr-color-border-medium: rgba(203, 213, 225, 0.18);
  --hr-color-border-strong: rgba(203, 213, 225, 0.28);

  /* Form Inputs & Controls */
  --hr-color-input-bg: #0E1528;
  --hr-color-input-border: #24304E;
  --hr-color-input-text: #F8FAFC;
  --hr-color-focus-ring: #E5D4A6;

  /* Interactive Buttons */
  --hr-color-btn-primary-bg: #31468F;
  --hr-color-btn-primary-hover: #3E58B2;
  --hr-color-btn-primary-text: #FFFFFF;

  /* Feedback & Validation */
  --hr-color-feedback-success: #66BB6A;
  --hr-color-feedback-success-bg: rgba(102, 187, 106, 0.14);
  --hr-color-feedback-success-border: rgba(102, 187, 106, 0.35);
  --hr-color-feedback-error: #EF5350;
  --hr-color-feedback-error-bg: rgba(239, 83, 80, 0.14);
  --hr-color-feedback-error-border: rgba(239, 83, 80, 0.35);
  --hr-color-feedback-warning: #FFCA28;
  --hr-color-feedback-warning-bg: rgba(255, 202, 40, 0.14);
  --hr-color-feedback-warning-border: rgba(255, 202, 40, 0.35);
  --hr-color-feedback-info: #42A5F5;
  --hr-color-feedback-info-bg: rgba(66, 165, 245, 0.14);
  --hr-color-feedback-info-border: rgba(66, 165, 245, 0.35);

  /* Shadows in Dark Mode (deeper, tighter ambient) */
  --hr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --hr-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --hr-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.45);
  --hr-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.55);
  --hr-shadow-float: 0 20px 40px rgba(0, 0, 0, 0.65);
  --hr-shadow-focus: 0 0 0 3px #E5D4A6;
}

/* ==========================================================================
   8. SELECTIVE SURFACE TRANSITIONS
   ========================================================================== */

html,
body,
header,
footer,
.card,
.form-card,
.faq-item,
.modal-card,
.mobile-nav-panel,
.theme-toggle-btn {
  transition: background-color var(--hr-transition-base),
              color var(--hr-transition-base),
              border-color var(--hr-transition-base);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   9. CORE UTILITIES & COMPONENTS
   ========================================================================== */

/* Typography */
.hr-display {
  font-family: var(--hr-font-display);
  font-weight: var(--hr-font-weight-semibold);
  line-height: var(--hr-line-height-tight);
  color: var(--hr-color-text-primary);
}

.hr-body {
  font-family: var(--hr-font-body);
  font-weight: var(--hr-font-weight-regular);
  line-height: var(--hr-line-height-base);
  color: var(--hr-color-text-secondary);
}

.hr-eyebrow {
  font-family: var(--hr-font-body);
  font-size: var(--hr-font-size-xs);
  font-weight: var(--hr-font-weight-bold);
  letter-spacing: var(--hr-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--hr-color-gold-warm);
}

/* Buttons */
.hr-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hr-space-2);
  font-family: var(--hr-font-body);
  font-size: var(--hr-font-size-base);
  font-weight: var(--hr-font-weight-semibold);
  color: var(--hr-color-btn-primary-text);
  background-color: var(--hr-color-btn-primary-bg);
  padding: 14px 28px;
  border-radius: var(--hr-radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(30, 42, 90, 0.2);
  transition: background-color var(--hr-transition-fast), transform var(--hr-transition-fast), box-shadow var(--hr-transition-fast);
}

.hr-btn-primary:hover {
  background-color: var(--hr-color-btn-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--hr-shadow-md);
}

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

.hr-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hr-space-2);
  font-family: var(--hr-font-body);
  font-size: var(--hr-font-size-base);
  font-weight: var(--hr-font-weight-semibold);
  color: var(--hr-color-text-primary);
  background-color: transparent;
  padding: 14px 24px;
  border-bottom: 2px solid var(--hr-color-border-medium);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--hr-transition-fast), color var(--hr-transition-fast);
}

.hr-btn-secondary:hover {
  border-color: var(--hr-color-text-primary);
  color: var(--hr-color-text-primary);
}

.hr-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hr-space-2);
  font-family: var(--hr-font-body);
  font-size: var(--hr-font-size-base);
  font-weight: var(--hr-font-weight-bold);
  color: #17352A;
  background: linear-gradient(135deg, #E5D4A6 0%, #C5A866 100%);
  padding: 14px 28px;
  border-radius: var(--hr-radius-pill);
  border: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(125, 100, 38, 0.2);
  transition: transform var(--hr-transition-fast), box-shadow var(--hr-transition-fast);
}

.hr-btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(125, 100, 38, 0.3);
}

/* Cards */
.hr-card-light {
  background-color: var(--hr-color-card-bg);
  border: 1px solid var(--hr-color-border-subtle);
  border-radius: var(--hr-radius-xl);
  padding: var(--hr-space-8);
  box-shadow: var(--hr-shadow-sm);
  transition: transform var(--hr-transition-fast), box-shadow var(--hr-transition-fast), background-color var(--hr-transition-base);
}

.hr-card-light:hover {
  transform: translateY(-2px);
  box-shadow: var(--hr-shadow-md);
}

.hr-card-dark {
  background-color: var(--hr-color-card-bg);
  color: var(--hr-color-text-primary);
  border-radius: var(--hr-radius-lg);
  padding: var(--hr-space-8);
  box-shadow: var(--hr-shadow-float);
  border: 1px solid var(--hr-color-border-subtle);
}

/* Badges */
.hr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--hr-space-1);
  padding: 4px 10px;
  border-radius: var(--hr-radius-pill);
  font-family: var(--hr-font-body);
  font-size: var(--hr-font-size-xs);
  font-weight: var(--hr-font-weight-bold);
  letter-spacing: var(--hr-letter-spacing-wide);
}

.hr-badge-gold {
  background-color: var(--hr-color-gold-subtle);
  color: var(--hr-color-gold-warm);
  border: 1px solid var(--hr-color-gold-border);
}

.hr-badge-forest {
  background-color: rgba(23, 53, 42, 0.08);
  color: var(--hr-color-forest-deep);
  border: 1px solid rgba(23, 53, 42, 0.25);
}

/* Inputs */
.hr-input {
  width: 100%;
  font-family: var(--hr-font-body);
  font-size: var(--hr-font-size-base);
  color: var(--hr-color-input-text);
  background-color: var(--hr-color-input-bg);
  border: 1px solid var(--hr-color-input-border);
  border-radius: var(--hr-radius-md);
  padding: 12px 14px;
  box-sizing: border-box;
  transition: border-color var(--hr-transition-fast), box-shadow var(--hr-transition-fast), background-color var(--hr-transition-base);
}

.hr-input:focus {
  outline: none;
  border-color: var(--hr-color-focus-ring);
  box-shadow: 0 0 0 3px var(--hr-color-focus-ring);
}

/* Accessible Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hr-color-border-medium);
  background: transparent;
  color: var(--hr-color-text-primary);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color var(--hr-transition-fast), color var(--hr-transition-fast), border-color var(--hr-transition-fast), transform var(--hr-transition-fast);
}

.theme-toggle-btn:hover {
  background: var(--hr-color-gold-subtle);
  border-color: var(--hr-color-gold-accent);
  color: var(--hr-color-gold-warm);
  transform: scale(1.05);
}

.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
}

.theme-toggle-btn .icon-moon {
  display: block;
}
.theme-toggle-btn .icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle-btn .icon-moon {
  display: none;
}
[data-theme="dark"] .theme-toggle-btn .icon-sun {
  display: block;
}

/* Mobile Nav Drawer Theme Toggle Button Reset */
.mobile-nav-app-btn.theme-toggle-btn {
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--hr-color-border-subtle) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 12px 0 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

.mobile-nav-app-btn.theme-toggle-btn span {
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Brand Lockup & Header Utilities */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--hr-color-text-primary);
  flex-shrink: 0;
}

.brand-logo-icon {
  border-radius: 9px;
  flex-shrink: 0;
}

.brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.brand-name {
  font-family: var(--hr-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.01em;
  color: var(--hr-color-text-primary);
  white-space: nowrap;
}

.brand-word {
  display: inline;
}

.brand-tag {
  font-family: var(--hr-font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hr-color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}