/**
 * RINDE PRO - Identidad de marca (Design System)
 * Estética deportiva seria: "vestuario / cancha de noche"
 * Modo oscuro por defecto con soporte para modo claro.
 */

:root {
  --rp-acero: #2f4a5f;
  --rp-noche: #0e1821;
  --rp-tinta: #13202b;
  --rp-niebla: #e8eef2;
  --rp-pique: #f26b21;
  --header-bg: #1c2e3d;
  --header-fg: #e8eef2;
  --action-bg: #f26b21;
  --action-hover: #ff8a4c;
  --action-fg: #13202b;
  --hot-text: #ff8a4c;
  --success-bg: #173a2a;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Paleta Oscura Principal (Cancha de Noche) */
  --bg-app: #0e1821;
  --bg-surface: #13202b;
  --bg-card: #16232f;
  --bg-card-hover: #1c2e3d;
  --bg-card-active: #2f4a5f;
  --bg-glass: rgba(22, 35, 47, 0.92);

  /* Bordes y Líneas */
  --border-subtle: #243544;
  --border-medium: #2a3b4a;
  --border-focus: #3fbf7a;
  --border-gold: rgba(242, 107, 33, 0.35);

  /* Acentos de Rendimiento */
  --accent-primary: #3fbf7a; /* Verde césped: progreso y completado */
  --accent-primary-hover: #54cd8c;
  --accent-primary-glow: rgba(63, 191, 122, 0.16);
  --accent-primary-text: #0e1821;

  --accent-secondary: #ff8a4c; /* Naranja pique: intensidad y RPE medio */
  --accent-secondary-glow: rgba(242, 107, 33, 0.12);

  --accent-danger: #f07070; /* Alerta y salud */
  --accent-danger-glow: rgba(240, 112, 112, 0.12);

  --accent-gold: #ff8a4c; /* Acento de intensidad */
  --accent-gold-bg: rgba(242, 107, 33, 0.1);
  --accent-gold-border: rgba(242, 107, 33, 0.35);

  /* Tipografía y Textos (Alto contraste WCAG AA/AAA) */
  --text-primary: #e8eef2; /* Niebla: texto sobre fondo oscuro */
  --text-secondary: #9aaebe; /* Gris azulado legible */
  --text-muted: #9aaebe;
  --text-inverse: #13202b;

  /* Familias Tipográficas */
  --font-display:
    "Barlow Condensed", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Escala de Tamaños */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */

  /* Espaciado */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */

  /* Radios de Borde */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* Sombras y Luces */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 20px var(--accent-primary-glow);
  --shadow-gold: 0 0 20px rgba(242, 107, 33, 0.18);

  /* Transiciones */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Área táctil mínima accesible */
  --touch-target-min: 44px;
}

/* Soporte para Modo Claro */
[data-theme="light"] {
  --header-bg: #2f4a5f;
  --header-fg: #ffffff;
  --hot-text: #b84a0c;
  --success-bg: #ddf1e6;
  --accent-danger: #c53a3a;
  --accent-secondary: #b84a0c;
  --accent-gold: #b84a0c;

  --bg-app: #f3f6f8;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #e8eef2;
  --bg-card-active: #d3dde5;
  --bg-glass: rgba(255, 255, 255, 0.9);

  --border-subtle: #d3dde5;
  --border-medium: #d3dde5;
  --border-focus: #18794a;

  --accent-primary: #18794a;
  --accent-primary-hover: #12613b;
  --accent-primary-glow: rgba(5, 150, 105, 0.15);
  --accent-primary-text: #ffffff;

  --text-primary: #13202b;
  --text-secondary: #4e6476;
  --text-muted: #4e6476;
  --text-inverse: #e8eef2;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Accesibilidad: Reducir animaciones si el usuario lo solicita */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}