/* =============================================================
   FTM DESIGN TOKENS
   The single source of truth for the FTM design system.
   Loaded on the frontend AND in the block editor by ftm-blocks.php.
   Every block CSS uses var(--ftm-*) — never hard-code hex values.
   ============================================================= */

@font-face {
  font-family: 'Prequel';
  src: url('https://freethemusic.life/wp-content/uploads/2025/03/PrequelDemo-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --ftm-navy:       #1A2747;   /* primary text, headers, buttons */
  --ftm-navy-soft:  #2E3C63;   /* secondary text */
  --ftm-bg:         #EEF1F5;   /* page background */
  --ftm-bg-warm:    #F6F3EC;   /* warm alternate */
  --ftm-card:       #FFFFFF;   /* card surface */
  --ftm-muted:      #6B7280;   /* tertiary text */
  --ftm-line:       #E4E8EE;   /* subtle borders */
  --ftm-gold:       #F2B230;   /* highlight */

  /* Rainbow from the FTM logo — accent only, never a flat fill */
  --ftm-rainbow: linear-gradient(90deg,
    #E94E3D 0%, #F2883A 16%, #F2C544 32%, #6FB24A 48%,
    #3DA3B5 64%, #3B6FB8 80%, #7E4BA8 100%);

  --shadow-sm: 0 1px 2px rgba(26,39,71,0.06), 0 2px 8px rgba(26,39,71,0.04);
  --shadow-md: 0 4px 12px rgba(26,39,71,0.08), 0 12px 32px rgba(26,39,71,0.06);
  --shadow-lg: 0 8px 24px rgba(26,39,71,0.14), 0 28px 60px rgba(26,39,71,0.12);

  --radius: 16px;
}

/* Title stack — every FTM heading uses this */
.ftm-title-stack {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Body stack */
.ftm-body-stack {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Shared button styles — reused by hero, cta-block, popup */
.ftm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.ftm-btn--primary {
  background: var(--ftm-navy);
  color: #fff;
  box-shadow: 0 4px 14px rgba(26,39,71,0.22);
}
.ftm-btn--primary:hover {
  background: #0F1A33;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(26,39,71,0.28);
}
.ftm-btn .arrow { transition: transform .2s ease; }
.ftm-btn:hover .arrow { transform: translateX(3px); }