/* Design tokens de Rekompra — copiados del Manual de Identidad v1.0 (docs/identidad/MANUAL-DE-IDENTIDAD.md).
   Cualquier cambio de identidad se versiona primero en el manual. */
:root {
  --rk-yellow: #FFD200;
  --rk-yellow-dark: #D9AE00;
  --rk-yellow-soft: #FFF3C4;

  --rk-ink: #23272B;
  --rk-gray-700: #3A4045;
  --rk-gray-500: #8A8F94;
  --rk-gray-300: #C9CDD0;
  --rk-gray-200: #E4E6E7;
  --rk-gray-100: #F4F4F2;
  --rk-white: #FFFFFF;

  --rk-text: var(--rk-ink);
  --rk-text-muted: var(--rk-gray-500);
  --rk-text-on-dark: var(--rk-white);
  --rk-bg: var(--rk-white);
  --rk-bg-soft: var(--rk-gray-100);
  --rk-bg-dark: var(--rk-ink);
  --rk-border: var(--rk-gray-200);
  --rk-primary: var(--rk-yellow);
  --rk-primary-hover: var(--rk-yellow-dark);
  --rk-on-primary: var(--rk-ink);

  --rk-font-display: 'Poppins', 'Montserrat', system-ui, sans-serif;
  --rk-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rk-text-xs: 0.75rem;
  --rk-text-sm: 0.875rem;
  --rk-text-base: 1rem;
  --rk-text-lg: 1.25rem;
  --rk-text-xl: 1.75rem;
  --rk-text-2xl: 2.5rem;
  --rk-text-3xl: 3.5rem;

  --rk-radius-sm: 8px;
  --rk-radius-md: 14px;
  --rk-radius-lg: 22px;
  --rk-radius-full: 999px;

  --rk-shadow-sm: 0 1px 2px rgba(35, 39, 43, 0.08);
  --rk-shadow-md: 0 6px 18px rgba(35, 39, 43, 0.12);
  --rk-shadow-lg: 0 16px 40px rgba(35, 39, 43, 0.16);
  --rk-shadow-glow: 0 0 28px rgba(255, 210, 0, 0.35);

  --rk-space-1: 4px;
  --rk-space-2: 8px;
  --rk-space-3: 12px;
  --rk-space-4: 16px;
  --rk-space-6: 24px;
  --rk-space-8: 32px;
  --rk-space-12: 48px;
  --rk-space-16: 64px;
  --rk-space-24: 96px;

  --rk-max-width: 1200px;
}

/* ---------- Logotipo: wordmark "rekompra" con la "o" como moneda amarilla con check ---------- */
.rk-logo {
  display: inline-flex; align-items: center; font-family: var(--rk-font-display); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1; color: var(--rk-ink); text-decoration: none; white-space: nowrap;
}
.rk-logo.on-dark { color: #F4F1EA; } /* blanco hueso en la versión fondo oscuro */
.rk-logo .rk-coin { width: 0.62em; height: 0.62em; margin: 0 0.035em; transform: translateY(0.02em); flex-shrink: 0; }
.rk-coin-glow { filter: drop-shadow(0 0 28px rgba(255, 210, 0, 0.35)); }