/**
 * Miami Ad School México — Global Design System
 * CSS Custom Properties — Eliminates all pure black (#000)
 */

:root {
  /* ── Brand Primary: Vino profundo ── */
  --mas-vino:            #7A0053;
  --mas-vino-hover:      #6B0049;
  --mas-magenta-oscuro:  #9B005E;

  /* ── Accent: Fucsia vibrante (STRICT) ── */
  --mas-fucsia:          #FF007A;
  --mas-fucsia-hover:    #D90067;

  /* ── Rosa palette ── */
  --mas-rosa-intenso:    #D92F73;
  --mas-rosa-claro:      #E88BB8;
  --mas-coral:           #F56F83;
  --mas-tarjeta-suave:   #F8D7E7;

  /* ── Highlight: Fucsia vibrante (STRICT — zero amarillo) ── */
  --mas-fucsia-cta:      #FF007A;

  /* ── Neutro: Blanco cálido ── */
  --mas-blanco:          #FFF7F8;
  --mas-gris-fondo:      #F5F0F0;
  --mas-gris-tinta:      #1A1A1A;
  --mas-gris-texto:       #4A4A4A;

  /* ── Semantic tokens (STRICT palette — zero yellow) ── */
  --footer-bg:           var(--mas-vino);
  --footer-title:        var(--mas-blanco);
  --footer-body:         var(--mas-blanco);
  --footer-hover:        var(--mas-fucsia-cta);
  --footer-bottom-bg:    var(--mas-magenta-oscuro);
  --footer-social:       var(--mas-blanco);

  --nav-bg:              var(--mas-vino);
  --nav-text:            var(--mas-blanco);
  --nav-hover:           var(--mas-fucsia-cta);
  --nav-active-dot:      var(--mas-fucsia-cta);

  --mega-bg:             var(--mas-vino);
  --mega-title:          var(--mas-blanco);
  --mega-body:           var(--mas-blanco);
  --mega-badge-bg:       var(--mas-coral);
  --mega-badge-text:     var(--mas-blanco);
  --mega-divider:        var(--mas-magenta-oscuro);
  --mega-hover:          var(--mas-magenta-oscuro);

  --cta-bg:              var(--mas-fucsia-cta);
  --cta-text:            var(--mas-blanco);
  --cta-hover:           var(--mas-blanco);
  --cta-hover-text:      var(--mas-vino);

  --btn-primary-bg:      var(--mas-fucsia-cta);
  --btn-primary-text:    var(--mas-blanco);
  --btn-primary-hover:   var(--mas-blanco);
  --btn-primary-hover-text: var(--mas-vino);

  /* ── Shadows with vino tint ── */
  --shadow-vino:         0 4px 20px rgba(122, 0, 83, 0.25);
  --shadow-vino-sm:      0 2px 8px rgba(122, 0, 83, 0.2);
  --shadow-card:         0 4px 16px rgba(122, 0, 83, 0.15);

  /* ── Typography ── */
  --font-narrow:         'ObviouslyNarrow', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:           'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ── Contrast rules (STRICT palette — zero yellow) ── */
  /* #FFF7F8  → texto sobre #7A0053, #9B005E, #D92F73, #FF007A */
  /* #7A0053  → texto sobre #FFF7F8, #F5F0F0, #E88BB8, #F56F83 */
  /* #FF007A  → CTAs, accents, highlights — sobre fondos claros */
}

/* ── Font Face: Obviously Narrow ── */
@font-face {
  font-family: 'ObviouslyNarrow';
  src: url('/fonts/Obviously-Narrow_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ObviouslyNarrow';
  src: url('/fonts/Obviously-Narrow_Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ObviouslyNarrow';
  src: url('/fonts/Obviously-Narrow_Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ObviouslyNarrow';
  src: url('/fonts/Obviously-Narrow.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Global reset for components using the system ── */
.mas-system {
  --nav-bg: var(--mas-vino);
  --nav-text: var(--mas-blanco);
}