/* ============================================================
   NRSFC 2026 OFFICIAL UNIFIED THEME SYSTEM (Zero Red Palette)
   Deep Regal Teal & Trophy Gold Design System
   ============================================================ */

:root {
  /* Brand Teal Family */
  --color-teal-deep:    #053D41;   /* Header, footer, hero surfaces */
  --color-teal-regal:   #075E63;   /* Links, secondary buttons, borders */
  --color-teal-mid:     #0F766E;   /* Active nav, focus, info */
  --color-teal-soft:    #E6F2F1;   /* Soft panels */

  /* Trophy Gold Family */
  --color-gold-trophy:  #D97706;   /* PRIMARY CTA buttons, prize highlights */
  --color-gold-warm:    #F59E0B;   /* Highlights, focus ring */
  --color-gold-light:   #FEF3C7;   /* Chips, callouts */

  /* Neutral Canvas & Typography */
  --color-pearl-white:  #FAF8F3;   /* Page background */
  --color-ink:          #0F172A;   /* Body + headings text */
  --color-ink-muted:    #475569;   /* Secondary text */
  --color-line:         #E7E2D6;   /* Borders, dividers */

  /* Semantic Feedback (No Red - Amber Warning is used for errors) */
  --color-success:      #15803D;
  --color-success-bg:   #ECFDF3;
  --color-warning:      #B45309;   /* ALSO used for errors */
  --color-warning-bg:   #FFFBEB;   /* Error & warning container background */
  --color-error:        #B45309;   /* Zero red - warm amber used for error states */
  --color-error-bg:     #FFFBEB;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Outfit', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   1. GLOBAL CANVAS & TYPOGRAPHY
   ============================================================ */
body {
  background-color: var(--color-pearl-white) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .heading-display, .hero-title, .section-heading, .why-hero-title {
  font-family: var(--font-display) !important;
  color: var(--color-ink);
}

a {
  color: var(--color-teal-regal);
  text-decoration-color: rgba(7, 94, 99, 0.4);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover {
  color: var(--color-teal-mid);
}

/* ============================================================
   2. BUTTON SYSTEM (Gold Primary & Teal Secondary)
   ============================================================ */
/* Primary Buttons (Trophy Gold) */
.btn-primary,
.btn-pill-primary,
.btn-gold-action,
.btn-funnel-primary,
.header-cta-btn,
.nav-btn-register,
.btn-forest-register,
.btn-nav-gold {
  background: linear-gradient(135deg, var(--color-gold-warm) 0%, var(--color-gold-trophy) 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.btn-primary:hover,
.btn-pill-primary:hover,
.btn-gold-action:hover,
.btn-funnel-primary:hover,
.header-cta-btn:hover,
.nav-btn-register:hover,
.btn-forest-register:hover,
.btn-nav-gold:hover {
  background: linear-gradient(135deg, #FBBF24 0%, var(--color-gold-warm) 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.48) !important;
}

/* Secondary Buttons (Teal Outline) */
.btn-secondary,
.btn-outline,
.btn-outline-action,
.btn-nav-outline,
.policy-btn-back {
  background: transparent !important;
  color: var(--color-teal-regal) !important;
  border: 1.5px solid var(--color-teal-regal) !important;
  border-radius: 9999px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-outline-action:hover,
.btn-nav-outline:hover,
.policy-btn-back:hover {
  background: var(--color-teal-soft) !important;
  border-color: var(--color-teal-mid) !important;
  color: var(--color-teal-deep) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   3. FORM INPUTS & SEMANTIC FEEDBACK (ZERO RED)
   ============================================================ */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-teal-mid) !important;
  border-color: var(--color-teal-mid) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
}

/* Form Errors & Warnings: Warm Amber with Warning Icon (Never Red) */
.field-error,
.error-msg,
.error-text,
.invalid-feedback,
.form-error {
  color: var(--color-warning) !important;
  background-color: var(--color-warning-bg) !important;
  border: 1px solid rgba(180, 83, 9, 0.3) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

.field-error::before,
.error-msg::before,
.invalid-feedback::before {
  content: "⚠ ";
  font-weight: 800;
  color: var(--color-warning);
}

/* General Alert / Error Containers */
.alert-danger,
.alert-error,
.error-banner,
.status-error {
  background-color: var(--color-warning-bg) !important;
  border: 1px solid rgba(180, 83, 9, 0.35) !important;
  border-left: 4px solid var(--color-warning) !important;
  color: #78350F !important;
  border-radius: 8px !important;
}

/* Status Indicators in Admin & Diagnostics */
.status-dot.status-down,
.status-dot.status-error,
.status-dot.status-failed {
  background-color: var(--color-warning) !important;
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.2) !important;
}

.status-dot.status-ok,
.status-dot.status-live,
.status-dot.status-active {
  background-color: var(--color-success) !important;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.2) !important;
}

.status-dot.status-unknown,
.status-dot.status-idle {
  background-color: #94A3B8 !important;
  box-shadow: none !important;
}

/* Red / Maroon Class Overrides */
.text-red-500, .text-red-600, .text-red-700, .text-rose-600, .text-danger {
  color: var(--color-warning) !important;
}
.bg-red-50, .bg-red-100, .bg-rose-50 {
  background-color: var(--color-warning-bg) !important;
}
.border-red-300, .border-red-400, .border-red-500, .border-danger {
  border-color: rgba(180, 83, 9, 0.35) !important;
}

/* ==============================================================================
   UNIFIED BRAND FOOTER (DEEP REGAL TEAL & TROPHY GOLD)
   ============================================================================== */
.brand-footer {
  background: #042D30 !important;
  color: #E6F2F1 !important;
  font-family: var(--font-body, 'Outfit', sans-serif);
}

.brand-footer a {
  color: #FFFFFF !important;
  transition: all 0.2s ease;
}

.brand-footer a:hover {
  color: #F59E0B !important;
}

.brand-footer a[href^="/privacy"]:hover,
.brand-footer a[href^="/terms"]:hover,
.brand-footer a[href^="/refund"]:hover,
.brand-footer a[href^="/delivery"]:hover,
.brand-footer a[href^="/competition"]:hover,
.brand-footer a[href^="/content"]:hover,
.brand-footer a[href^="/consent"]:hover,
.brand-footer a[href^="/copyright"]:hover {
  background: rgba(217, 119, 6, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  transform: translateX(3px);
}