/* =========================================================
   PACHACAMAC — Design Tokens
   Archivo único de variables de estilo. TODAS las páginas
   (login, perfil, mis ventas, mis pedidos, home, etc.)
   deben importar este archivo y usar estas variables en vez
   de definir colores/tipografías sueltas por su cuenta.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Gravitas+One&family=Jacques+Francois&display=swap');

:root {
  /* ---- Colores base ---- */
  --color-brand-dark: #2B1A17;      /* marrón casi negro — texto general, header */
  --color-brand-gold: #E9BF70;      /* dorado — logo */
  --color-brand-gold-outline: #CFA75D; /* dorado outline del logo / degradé */
  --color-menu-icon: #96665E;       /* ícono de menú (☰) */

  --color-dusty-pink: #C29C96;      /* fondo botones, tarjeta de ruta, slogan destacado */
  --color-terracota: #BD4C42;       /* extremo del degradé del header */
  --color-bullet-origen: #8D4C42;   /* círculos de ciudades de origen */
  --color-bullet-destino: #768D42;  /* círculo de Buenos Aires */
  --color-franja-fondo: #80615D;    /* fondo franja de confianza */

  --color-bg-page: #EDEDED;         /* fondo general de la página */

  /* ---- Opacidades ya aplicadas (usar rgba, no el hex sólido) ---- */
  --color-dusty-pink-50: rgba(194, 156, 150, 0.5);
  --color-franja-fondo-70: rgba(128, 97, 93, 0.7);
  --color-bullet-origen-50: rgba(141, 76, 66, 0.5);
  --color-bullet-destino-50: rgba(118, 141, 66, 0.5);
  --color-header-gradient-50: linear-gradient(90deg, rgba(194,156,150,0.5) 0%, rgba(189,76,66,0.5) 100%);

  /* ---- Degradé de bordes (botón "Ver catálogo" y tarjeta de ruta) ---- */
  /* De esquina superior derecha (dorado) a esquina inferior izquierda (marrón oscuro) */
  --gradient-border: linear-gradient(135deg, var(--color-brand-gold-outline) 0%, var(--color-brand-dark) 100%);

  /* ---- Tipografías ---- */
  --font-logo: 'KyivType Sans', sans-serif;          /* fallback: si no está licenciada, usar una geometric sans similar */
  --font-slogan: 'Gravitas One', serif;
  --font-heading: 'KyivType Serif', serif;            /* eyebrow y párrafo descriptivo, peso Bold */
  --font-body: 'Jacques Francois', serif;              /* botones, links, tarjeta de ruta, franja de confianza */
}

/* =========================================================
   NOTA SOBRE KyivType Sans / KyivType Serif:
   No son fuentes de Google Fonts — son de una fundición
   paga (Brownfox). Si no se compró la licencia web, hay que:
   a) comprarla y self-hostear los archivos .woff2, o
   b) usar una alternativa similar como fallback:
      - KyivType Sans → probar con "Manrope" o "Unbounded"
      - KyivType Serif → probar con "Fraunces" o "Newsreader"
   Confirmar con la persona antes de reemplazarlas.
   ========================================================= */