/* design-tokens.css — sistema de diseño compartido */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Inter:wght@300;400;600&family=Poppins:wght@700;800&display=swap');

:root {
  /* ── Colores ── */
  --color-primary:      #1773ff;
  --color-primary-dark: #0b5ed7;
  --color-navy:         #1e3a8a;
  --color-accent:       #f59e0b;
  --color-danger:       #dc2626;
  --color-success:      #16a34a;
  --color-bg:           #f4f6fa;
  --color-surface:      #ffffff;
  --color-text:         #1f2937;
  --color-muted:        #6b7280;
  --color-offer:        #dc2626;

  /* ── Tipografías ── */
  --font-heading: 'Montserrat', sans-serif;
  --font-display: 'Poppins', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ── Espaciados ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* ── Radios ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ── Contenedor ── */
  --container-max:     1200px;
  --container-padding: 16px;

  /*
   * Breakpoints (referencia — usar los valores directamente en @media, no como var()):
   *   mobile:  480px
   *   tablet:  768px
   *   desktop: 1024px
   */
}