/* ============================================================
   ToursZoom Design Tokens — "Horizon" identity, v2.0 (June 2026)
   Drop into WordPress (Elementor custom CSS) or any web project.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --tz-navy:        #103d62;  /* Primary. Headings, heroes, footer, logo ring */
  --tz-coral:       #FF6B4A;  /* Accent & CTA. Buttons, highlights, "Zoom" */
  --tz-sky:         #5B8DEF;  /* Secondary accent. Info, illustration, links on dark */
  --tz-sand:        #F4EDE3;  /* Warm surface. Cards, alternating sections */

  /* ---- Extended ramps ---- */
  --tz-navy-700:    #164e7d;  /* Hover state for navy elements */
  --tz-navy-300:    #8CA3C4;  /* Muted text on navy */
  --tz-coral-600:   #E04F2D;  /* Coral hover state (buttons) */
  --tz-coral-700:   #C2451E;  /* Accessible coral text links on white (5.0:1) */
  --tz-coral-100:   #FFE5DD;  /* Coral tint backgrounds, badges */
  --tz-sky-100:     #E5EEFD;  /* Info tint backgrounds */
  --tz-sand-50:     #FAF6EE;  /* Lightest warm background */

  /* ---- Neutrals ---- */
  --tz-white:       #FFFFFF;
  --tz-cloud:       #F5F7FA;  /* Cool alternate background */
  --tz-slate:       #374151;  /* Body text */
  --tz-slate-500:   #6B7280;  /* Secondary text, captions */
  --tz-border:      #E3E8F0;  /* Hairlines, card borders */

  /* ---- Semantic ---- */
  --tz-success:     #2E7D52;
  --tz-warning:     #B45309;
  --tz-danger:      #C0392B;

  /* ---- Typography ---- */
  --tz-font-heading: 'Poppins', Arial, sans-serif;     /* 600 SemiBold / 700 Bold */
  --tz-font-body:    'Inter', Helvetica, Arial, sans-serif; /* 400 / 500 */

  /* Type scale (desktop) */
  --tz-text-h1: 44px;   /* Poppins 700, line-height 1.15, color navy */
  --tz-text-h2: 32px;   /* Poppins 600, line-height 1.2 */
  --tz-text-h3: 24px;   /* Poppins 600, line-height 1.3 */
  --tz-text-h4: 19px;   /* Poppins 600, line-height 1.4 */
  --tz-text-body: 17px; /* Inter 400, line-height 1.65, color slate */
  --tz-text-small: 14px;
  --tz-leading-body: 1.65;

  /* ---- UI ---- */
  --tz-radius: 10px;
  --tz-radius-lg: 16px;
  --tz-shadow-card: 0 2px 8px rgba(16, 61, 98, 0.08);
}

/* ---- Reference components ---- */

.tz-btn-primary {
  background: var(--tz-coral);
  color: var(--tz-white);
  font: 500 16px/1 var(--tz-font-body);
  padding: 14px 28px;
  border: none;
  border-radius: var(--tz-radius);
  cursor: pointer;
}
.tz-btn-primary:hover { background: var(--tz-coral-600); }

.tz-btn-secondary {
  background: transparent;
  color: var(--tz-navy);
  border: 2px solid var(--tz-navy);
  font: 500 16px/1 var(--tz-font-body);
  padding: 12px 26px;
  border-radius: var(--tz-radius);
  cursor: pointer;
}
.tz-btn-secondary:hover { background: var(--tz-navy); color: var(--tz-white); }

a.tz-link { color: var(--tz-coral-700); text-decoration: underline; }
.tz-hero { background: var(--tz-navy); color: var(--tz-white); }
.tz-hero .accent { color: var(--tz-coral); }
.tz-card { background: var(--tz-white); border: 1px solid var(--tz-border);
  border-radius: var(--tz-radius-lg); box-shadow: var(--tz-shadow-card); }
.tz-section-warm { background: var(--tz-sand-50); }
.tz-badge { background: var(--tz-coral-100); color: var(--tz-coral-600);
  font: 500 13px/1 var(--tz-font-body); padding: 5px 12px; border-radius: 999px; }

/* ============================================================
   Accessibility contrast notes (WCAG 2.1, on white #FFFFFF):
   - Navy #103d62: 14.3:1 — all text sizes (AAA)
   - Slate #374151: 10.3:1 — body text (AAA)
   - Coral #FF6B4A: 2.8:1 — large display text & button fills ONLY,
     never small body text. For coral text links use --tz-coral-700
     (#C2451E, 5.0:1 — passes AA).
   - Coral #FF6B4A on navy #103d62: 5.1:1 — accent words in hero
     headlines (passes AA for large text).
   - White on navy: 14.3:1 (AAA).
   - Never pair coral with sky, or small coral text on sand.
   ============================================================ */