/* ============================================================
   Repress! — Design Tokens
   Variables CSS reutilizables: colores, tipografía, espaciado
   ============================================================ */

:root {
  /* ─── Marca ─── */
  --color-corporate:        #ED1C24;
  --color-corporate-dark:   #C41820;
  --color-corporate-light:  #FCE4E5;

  /* ─── Estructura ─── */
  --color-bg:               #f8fafc;
  --color-surface:          #ffffff;
  --color-surface-alt:      #f1f5f9;
  --color-border:           #e2e8f0;
  --color-header-dark:      #0f172a;
  --color-text:             #0f172a;
  --color-text-muted:       #64748b;
  --color-text-light:       #94a3b8;

  /* ─── Estado ─── */
  --color-success:          #16a34a;
  --color-warning:          #eab308;
  --color-danger:           #dc2626;
  --color-info:             #2563eb;

  /* ─── Acentos golf ─── */
  --color-accent-green:     #15803d;

  /* ─── Tipografía ─── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* ─── Espaciado ─── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ─── Border radius ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 9999px;
}

/* Helper para números (usar tabular-nums siempre que se muestre data) */
.tabular {
  font-variant-numeric: tabular-nums;
}