/*
 * RADIO ZAMAR — MODERN CHRISTIAN MEDIA
 * Rebranding Design System
 * Staging environment only
 * Phase 1: Foundation
 */

:root {
  /* Primary brand colors */
  --rz-modern-navy: #101827;
  --rz-modern-blue: #237EA3;
  --rz-modern-gold: #D9AF53;

  /* Warm supporting colors */
  --rz-modern-cream: #F7F2E9;
  --rz-modern-coral: #E96C65;

  /* Text and surface colors */
  --rz-modern-white: #FFFFFF;
  --rz-modern-text: #18253A;
  --rz-modern-muted: #64748B;
  --rz-modern-border: #E4E7EC;

  /* Layout */
  --rz-content-width: 1320px;
  --rz-card-radius: 16px;
  --rz-button-radius: 10px;

  /* Motion */
  --rz-transition: 200ms ease;
}

/* Reusable rebranding components */

.rz-modern-section {
  width: min(
    var(--rz-content-width),
    calc(100% - 32px)
  );
  margin-inline: auto;
}

.rz-modern-card {
  background: var(--rz-modern-white);
  color: var(--rz-modern-text);
  border: 1px solid var(--rz-modern-border);
  border-radius: var(--rz-card-radius);
  box-shadow: 0 6px 24px rgba(16, 24, 39, .08);
}

.rz-modern-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--rz-button-radius);
  background: var(--rz-modern-blue);
  color: var(--rz-modern-white);
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color var(--rz-transition),
    transform var(--rz-transition);
}

.rz-modern-button:hover {
  background: var(--rz-modern-navy);
  color: var(--rz-modern-white);
  transform: translateY(-2px);
}

.rz-modern-button:focus-visible {
  outline: 3px solid var(--rz-modern-gold);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .rz-modern-section {
    width: calc(100% - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rz-modern-button {
    transition: none;
  }

  .rz-modern-button:hover {
    transform: none;
  }
}