/* =============================================================
   tokens.css — Design system de MyPump
   Variables CSS para light mode (:root) y dark mode ([data-theme="dark"]).
   Verde lima #b8f060 = único acento de marca, usar con medida (CTAs, badges, progress).
   Texto sobre verde siempre negro (--color-on-brand) — nunca blanco.
   ============================================================= */

:root {
  /* --- Fondos --- */
  --color-bg-primary:   #ffffff;
  --color-bg-secondary: #fafafa;
  --color-bg-tertiary:  #f4f4f5;

  /* --- Texto --- */
  --color-text-primary:   #0a0a0a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted:     #888888;

  /* --- Bordes --- */
  --color-border:       #e5e5e5;
  --color-border-strong:#d0d0d0;

  /* --- Marca: verde lima Pump Team --- */
  --color-brand:        #b8f060;
  --color-brand-hover:  #a8e050;
  --color-brand-subtle: rgba(184, 240, 96, 0.12);
  --color-on-brand:     #0a0a0a; /* texto sobre verde — siempre negro */

  /* --- Estados semánticos --- */
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger:  #dc2626;

  /* --- Tipografía --- */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-base:16px;
  --font-size-lg:  18px;
  --font-size-xl:  20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* --- Spacing (base 4px) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* --- Border radius --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* --- Sombras --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* --- Transiciones --- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  /* --- Fondos --- */
  --color-bg-primary:   #0a0a0a;
  --color-bg-secondary: #141414;
  --color-bg-tertiary:  #1f1f1f;

  /* --- Texto --- */
  --color-text-primary:   #f5f5f5;
  --color-text-secondary: #b5b5b5;
  --color-text-muted:     #757575;

  /* --- Bordes --- */
  --color-border:       #2a2a2a;
  --color-border-strong:#3a3a3a;

  /* --- Marca: mismo verde, subtle más intenso en dark --- */
  --color-brand:        #b8f060;
  --color-brand-hover:  #a8e050;
  --color-brand-subtle: rgba(184, 240, 96, 0.18);
  --color-on-brand:     #0a0a0a;

  /* --- Estados semánticos --- */
  --color-success: #22c55e;
  --color-warning: #fbbf24;
  --color-danger:  #ef4444;

  /* --- Sombras (más opacas en dark — el negro no contrasta sobre negro) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.48);
}