/* ==========================================================================
   Renddi · Design tokens
   v0.2 (provisional) · Tipografía y escala pendientes de validación
   Prefijo: --rd-
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. Color · marca (paleta de referencia)
     ------------------------------------------------------------------ */
  --rd-black-pearl: #1A2C30;     /* Fondo oscuro principal */
  --rd-blue-lagoon: #0E6873;     /* Secundario, halos */
  --rd-copper: #61413C;          /* Apoyo */
  --rd-lust: #E4201B;            /* Acento intenso, halos */
  --rd-burnt-orange: #FE7E3C;    /* CTA: siempre con texto oscuro (5,7:1) */

  /* Colores del mosaico del logo (solo decorativos, nunca para texto) */
  --rd-pixel-teal: #12B3B0;
  --rd-pixel-green: #3DAA6B;
  --rd-pixel-yellow: #F7C21B;
  --rd-pixel-orange: #FE7E3C;
  --rd-pixel-red: #E4201B;
  --rd-pixel-magenta: #C8246C;
  --rd-pixel-plum: #6B2A6E;

  /* ------------------------------------------------------------------
     2. Color · semánticos
     ------------------------------------------------------------------ */
  --rd-bg: var(--rd-black-pearl);
  --rd-bg-deep: #122125;                     /* Zonas de mayor profundidad */
  --rd-surface: rgba(255, 255, 255, 0.04);   /* Paneles sobre oscuro */
  --rd-border: rgba(184, 199, 201, 0.18);
  --rd-text: #F4F7F7;                        /* 13,5:1 sobre black pearl */
  --rd-text-muted-on-dark: #B8C7C9;          /* 8,3:1 sobre black pearl */
  --rd-cta-bg: var(--rd-burnt-orange);
  --rd-cta-bg-hover: #FF945B;
  --rd-cta-text: var(--rd-black-pearl);
  --rd-link: #7FD3D6;                        /* Turquesa claro: 8,4:1 */
  --rd-focus: #7FD3D6;

  /* ------------------------------------------------------------------
     3. Tipografía
     Schibsted Grotesk (variable 400–900, OFL), autoalojada.
     Una sola familia: el contraste lo pone el peso, no una segunda fuente.
     ------------------------------------------------------------------ */
  --rd-font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;

  --rd-weight-regular: 400;
  --rd-weight-medium: 500;
  --rd-weight-bold: 700;
  --rd-weight-black: 800;

  /* Escala fluida: 1,2 en móvil → 1,333 en escritorio (320px → 1440px) */
  --rd-text-xs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13 → 14 */
  --rd-text-s: clamp(0.9375rem, 0.91rem + 0.13vw, 1rem);        /* 15 → 16 */
  --rd-text-m: clamp(1.0625rem, 1.03rem + 0.18vw, 1.1875rem);   /* 17 → 19 (base) */
  --rd-text-l: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);        /* 20 → 24 */
  --rd-text-xl: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);          /* 24 → 34 */
  --rd-text-2xl: clamp(1.875rem, 1.5rem + 1.9vw, 3rem);         /* 30 → 48 */
  --rd-text-display: clamp(2.375rem, 1.6rem + 3.9vw, 4.75rem);  /* 38 → 76 */

  --rd-leading-tight: 1.05;
  --rd-leading-snug: 1.25;
  --rd-leading-body: 1.6;

  --rd-tracking-display: -0.025em;
  --rd-tracking-heading: -0.015em;

  --rd-measure: 62ch;   /* Longitud máxima de línea en texto corrido */

  /* ------------------------------------------------------------------
     4. Espaciado (base 4px)
     ------------------------------------------------------------------ */
  --rd-space-1: 0.25rem;   /* 4 */
  --rd-space-2: 0.5rem;    /* 8 */
  --rd-space-3: 0.75rem;   /* 12 */
  --rd-space-4: 1rem;      /* 16 */
  --rd-space-5: 1.5rem;    /* 24 */
  --rd-space-6: 2rem;      /* 32 */
  --rd-space-7: 3rem;      /* 48 */
  --rd-space-8: 4rem;      /* 64 */
  --rd-space-9: 6rem;      /* 96 */
  --rd-space-10: 8rem;     /* 128 */

  --rd-section-space: clamp(4rem, 2.5rem + 7vw, 8rem);  /* Separación vertical entre bloques */

  /* ------------------------------------------------------------------
     5. Layout
     ------------------------------------------------------------------ */
  --rd-container: 72rem;                                   /* 1152px */
  --rd-gutter: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);
  --rd-header-h: 4.5rem;       /* Cabecera compacta (tras scroll) */
  --rd-header-h-top: 6rem;     /* Cabecera amplia (arriba del todo) */
  --rd-logo-h: 2.75rem;        /* Logo compacto */
  --rd-logo-h-top: 4rem;       /* Logo amplio */

  /* ------------------------------------------------------------------
     6. Componentes base
     ------------------------------------------------------------------ */
  --rd-radius-pixel: 3px;    /* Cuadros del mosaico */
  --rd-radius-s: 6px;
  --rd-radius-m: 12px;
  --rd-radius-pill: 999px;   /* Botones */

  --rd-btn-h: 3.25rem;       /* 52px: objetivo táctil holgado */
  --rd-btn-px: 1.5rem;

  --rd-shadow-cta: 0 10px 30px -10px rgba(254, 126, 60, 0.55);

  /* ------------------------------------------------------------------
     7. Movimiento
     ------------------------------------------------------------------ */
  --rd-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rd-duration-fast: 150ms;
  --rd-duration-base: 250ms;

  /* ------------------------------------------------------------------
     8. Capas (z-index)
     ------------------------------------------------------------------ */
  --rd-z-header: 50;
  --rd-z-menu: 60;
  --rd-z-dock: 90;
}

/* Cabecera y logo más amplios en escritorio */
@media (min-width: 60rem) {
  :root {
    --rd-header-h-top: 7.5rem;
    --rd-logo-h: 3.5rem;
    --rd-logo-h-top: 5.5rem;
  }
}