/**
 * Royal Media Designs — Design tokens
 *
 * Fuente de verdad: las variables del archivo de Figma
 * "Royal Media Designs — Landing Page Editable" (jxpHfSxCLu8G7ceKLNNHqC).
 *
 * Los nombres de marca son los del Figma, para que un cambio allá se pueda
 * rastrear acá sin traducir. Las variantes `--*-ink` no existen en Figma:
 * son las versiones accesibles, y están explicadas más abajo.
 */

:root {
  /* --- Marca (literal del Figma) --- */
  --rmd-plum: #200530;    /* Color/Brand/Plum */
  --rmd-purple: #470961;  /* Color/Brand/Purple */
  --rmd-gold: #e8a11c;    /* Color/Brand/Gold */
  --rmd-coral: #fa6b5c;   /* Color/Accent/Coral */
  --rmd-cyan: #14b8cc;    /* Color/Accent/Cyan */
  --rmd-ink: #1c131f;     /* Color/Text/Ink */
  --rmd-muted: #6b636e;   /* Color/Text/Muted */
  --rmd-ivory: #fbf8f3;   /* Color/Background/Ivory */
  --rmd-white: #ffffff;   /* Color/Background/White */

  /* --- Variantes accesibles ---
   *
   * Tres colores de la paleta no llegan al mínimo de WCAG 2.2 AA cuando se
   * usan como TEXTO sobre ivory. Medido sobre #fbf8f3:
   *
   *   coral  #fa6b5c   2.71:1   necesita 3:1 (texto grande) o 4.5:1 (normal)
   *
   * Ojo con el eyebrow: mide 23,4px a 1440, justo por debajo de los 24px que
   * WCAG considera texto grande. Cuenta como texto normal y necesita 4.5:1,
   * así que --rmd-coral-ink se calibró a ese umbral y no al de 3:1.
   *   cyan   #14b8cc   2.26:1   idem
   *   gold   #e8a11c   2.08:1   idem
   *
   * Como SUPERFICIE (fondo de botón, bloque de color) los originales se usan
   * sin tocar: el requisito de contraste aplica al texto, no al relleno.
   * Para texto sobre fondo claro se usan estas variantes, que conservan el
   * tono y sí cumplen.
   */
  --rmd-coral-ink: #cc3e2c;  /* 4.62:1 — eyebrows y texto coral */
  --rmd-cyan-ink: #0a7a87;   /* 4.78:1 — texto cyan sobre claro */
  --rmd-gold-ink: #8a6a2f;   /* 4.66:1 — texto dorado sobre claro */

  /* --- Roles semánticos ---
   * Los componentes usan estos, nunca los de marca directamente. Así un
   * cambio de superficie no obliga a tocar cada regla.
   */
  --rmd-surface: var(--rmd-ivory);
  --rmd-surface-alt: var(--rmd-white);
  --rmd-surface-dark: var(--rmd-plum);
  --rmd-text: var(--rmd-muted);
  --rmd-text-strong: var(--rmd-ink);
  --rmd-heading: var(--rmd-purple);
  /* El cliente pidio fidelidad exacta al Figma: titulares y eyebrows llevan
     el cyan y el coral de marca aunque queden bajo el minimo AA sobre ivory
     (2.26:1 y 2.71:1). Las variantes -ink quedan disponibles para revertir. */
  --rmd-heading-accent: var(--rmd-cyan);
  --rmd-eyebrow: var(--rmd-coral);
  --rmd-text-on-dark: rgba(255, 255, 255, 0.84);

  /* Label blanco sobre cyan, como el Figma. Queda en 2.40:1 (bajo AA);
     el cliente pidió fidelidad exacta — para revertir: var(--rmd-plum). */
  --rmd-btn-primary-bg: var(--rmd-cyan);
  --rmd-btn-primary-text: var(--rmd-white);

  /* En el Figma la cita va en blanco sobre las tres tarjetas. Sobre coral da
     2.71:1 y sobre cyan 2.26:1, por debajo del 4.5:1 de AA — se mantiene el
     diseño por pedido del cliente, igual que en titulares y botones. Para
     revertir: var(--rmd-plum), que da 6.50:1 y 7.78:1. */
  --rmd-on-coral: var(--rmd-white);
  --rmd-on-cyan: var(--rmd-white);
  --rmd-on-purple: var(--rmd-white);

  /* --- Tipografía ---
   * Montserrat para titulares y UI, Inter para texto. Ambas self-hosted
   * vía @fontsource-variable: sin peticiones a fonts.gstatic.com.
   */
  --rmd-font-display: "Montserrat Variable", "Montserrat", system-ui, sans-serif;
  --rmd-font-body: "Inter Variable", "Inter", system-ui, sans-serif;
  /* Serif solo para las citas de los testimonios, como en el Figma. */
  --rmd-font-quote: "Playfair Display Variable", "Playfair Display", Georgia, serif;

  /* Escala del Figma. El H1 son 55px/60px a 1440; abajo escala con clamp
     para que no reviente en móvil. */
  --rmd-text-h1: clamp(2.125rem, 1.15rem + 4.3vw, 3.4375rem); /* 34 → 55 */
  --rmd-text-h2: clamp(1.75rem, 1.28rem + 2.1vw, 2.5rem);     /* 28 → 40 */
  --rmd-text-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);      /* 20 → 24 */
  --rmd-text-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.4375rem);/* 18 → 23 */
  --rmd-text-lead: 1.125rem;                                  /* 18 */
  --rmd-text-body: 1rem;
  --rmd-text-small: 0.875rem;
  --rmd-text-eyebrow: clamp(0.9375rem, 0.75rem + 0.8vw, 1.5rem); /* 15 → 24 */

  --rmd-leading-display: 1.09;
  --rmd-leading-heading: 1.2;
  --rmd-leading-body: 1.55;

  --rmd-weight-regular: 400;
  --rmd-weight-medium: 500;
  --rmd-weight-semibold: 600;
  --rmd-weight-bold: 700;

  --rmd-tracking-eyebrow: 0.02em;
  --rmd-tracking-display: -0.01em;

  /* --- Espaciado --- */
  --rmd-space-1: 0.25rem;
  --rmd-space-2: 0.5rem;
  --rmd-space-3: 0.75rem;
  --rmd-space-4: 1rem;
  --rmd-space-5: 1.5rem;
  --rmd-space-6: 2rem;
  --rmd-space-7: 3rem;
  --rmd-space-8: 4rem;
  --rmd-space-9: 6rem;

  --rmd-section-y: clamp(3rem, 1.5rem + 6vw, 6rem);

  /* --- Layout ---
   * El Figma trabaja a 1440 con 72px de margen: 1296 de contenido útil.
   */
  --rmd-container: 1296px;
  --rmd-gutter: clamp(1.25rem, 0.5rem + 3vw, 4.5rem);
  --rmd-measure: 62ch;

  /* --- Bordes y sombras --- */
  --rmd-radius: 5px;      /* botones */
  --rmd-radius-lg: 12px;  /* tarjetas de testimonio */
  --rmd-radius-xl: 15px;  /* imágenes y tarjetas de industria */
  --rmd-border: 1px solid color-mix(in srgb, var(--rmd-purple) 14%, transparent);
  /* El Figma usa 0 4px 15px rgba(0,0,0,.25) en las imágenes de tarjeta. */
  --rmd-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  --rmd-shadow-soft: 0 1px 2px rgba(32, 5, 48, 0.04), 0 14px 32px -18px rgba(32, 5, 48, 0.22);

  /* --- Motion --- */
  --rmd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rmd-duration: 200ms;
}

/* Desde 900px la tipografía de sección se mide contra el contenedor de
   contenido (1296px en el Figma), no contra el viewport. Los valores en cqw
   equivalen exactamente a los px del diseño cuando el contenido mide 1296, y
   escalan con él por debajo: 55px de H1 → 4.244cqw, 40px de H2 → 3.086cqw,
   24px de eyebrow → 1.852cqw, 18px del cuerpo destacado → 1.389cqw.
   Sin esto, en un portátil (~1274px de viewport) las cajas medían un 91% y la
   letra seguía al 100%: el texto envolvía distinto al diseño y "el ancho se
   veía totalmente distinto". Mismo principio que ya usan las tarjetas. */
@media (min-width: 900px) {
  :root {
    /* El margen lateral del Figma es 72/1440 = 5% del viewport. Con esto el
       lienzo escala completo: en una pantalla de 1900 el sitio es el diseño
       ampliado ×1.32, no un bloque de 1296 centrado con espacio muerto. */
    --rmd-gutter: 5vw;
    /* Relleno vertical de sección, también proporcional (96px a 1440). */
    --rmd-section-y: 6.67vw;

    --rmd-text-h1: 4.244cqw;
    --rmd-text-h2: 3.086cqw;
    --rmd-text-eyebrow: 1.852cqw;
    --rmd-text-lead: 1.389cqw;
  }
}