/* Soy de Pádel · tokens de marca
 * Fuente de verdad visual para web/ y print/. Ver design/brand/brand-guide.md
 * Paleta alineada con el logo SOYDEPADEL y el configurador de camiseta (Lovable).
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:ital,wght@0,600;0,700;0,800;1,800;1,900&display=swap");

:root {
  /* ---- Paleta de marca (4 colores) ---- */
  --brand-navy: #1B2A4A;        /* Marino pista: fondos, texto principal, prenda estrella */
  --brand-lime: #D1D367;        /* Lima bola: acento del logo ("PADEL"), SOLO sobre fondos oscuros */
  --brand-white: #FFFFFF;       /* Blanco */
  --brand-olive: #909400;       /* Oliva: el lima legible sobre fondos claros (botones, enlaces, "PADEL" en positivo) */

  /* ---- Neutros de apoyo (no cuentan como color de marca) ---- */
  --brand-ink: #0F141C;         /* texto sobre claro */
  --brand-paper: #FBFAF8;       /* fondo claro de página */
  --brand-mist: #E9EDF2;        /* fondo "estudio" detrás de los mockups */
  --brand-lime-soft: #EBEED0;   /* fondo de chips/estados seleccionados (como el configurador) */
  --brand-muted: #5B6577;       /* texto secundario */
  --brand-line: #DDE1E7;        /* bordes y separadores */

  /* ---- Roles ---- */
  --brand-bg: var(--brand-paper);
  --brand-fg: var(--brand-ink);
  --brand-primary: var(--brand-navy);
  --brand-primary-fg: var(--brand-white);
  --brand-accent: var(--brand-olive);       /* acento sobre claro */
  --brand-accent-on-dark: var(--brand-lime);/* acento sobre marino/negro */

  /* ---- Colores reales de prenda (para swatches) ---- */
  --garment-marino: #1F2B47;
  --garment-blanco: #F4F4F1;
  --garment-negro: #1C1C1E;
  --garment-gris: #A9ABAE;

  /* ---- Tipografía (Google Fonts) ---- */
  --brand-font-display: "Montserrat", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --brand-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --brand-weight-wordmark: 600;   /* SOYDEPADEL, espaciado ancho */
  --brand-weight-display: 800;    /* titulares y lemas (lemas en cursiva 800/900) */
  --brand-tracking-wordmark: 0.06em;
  --brand-tracking-eyebrow: 0.14em; /* antetítulos en mayúsculas (tipo "COMPETICIÓN") */

  /* ---- Forma ---- */
  --brand-radius: 6px;            /* igual que el configurador (.375rem) */
  --brand-radius-lg: 14px;
  --brand-shadow: 0 1px 2px rgba(15, 20, 28, .06), 0 8px 24px rgba(15, 20, 28, .08);
}

/* Utilidades mínimas opcionales */
.brand-eyebrow {
  font-family: var(--brand-font-body);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: var(--brand-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-accent);
}
.brand-lema {
  font-family: var(--brand-font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: .95;
}

/* ---- Alias para web/styles.css (catálogo QR) ---- */
:root {
  --color-primary: var(--brand-navy);
  --color-ink: var(--brand-navy);
  --color-accent: var(--brand-lime);
  --color-on-accent: var(--brand-navy);
  --color-bg: var(--brand-paper);
  --color-media-bg: var(--brand-mist);
  --color-text: var(--brand-ink);
  --color-muted: var(--brand-muted);
  --color-line: var(--brand-line);
  --font-sans: var(--brand-font-body);
  --font-heading: var(--brand-font-display);
}