:root {
  /* Global colors */
  --white: #ffffff;
  --black: #000000;
  --white-soft: #f5f6f8;

  /* Brand — suaves y elegantes en ROJO */
  --color-primary: #c40202;
  --color-primary-hover: #a90202;
  --color-secondary: #e44545;
  --color-accent: #f7d6d6; /* más suave, menos rosado saturado */

  --color-navbar: #1a1c22;
  --color-navbar-text: #ececec; /* más claro para contraste óptimo */

  /* Gradiente suave premium */
  --color-gradient: linear-gradient(
    135deg,
    #c40202 0%,
    #e44545 50%,
    #f7d6d6 100%
  );

  /* Hero más claro (gris ligeramente cálido) */
  --hero-gradient: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.55) 65%,
    #eef1f6 100%
  );
  
  --color-overlay: rgba(240, 242, 248, 0.18);

  --btn-principal-bg: var(--color-primary);
  --btn-principal-color: #ffffff;
  --btn-principal-hover: var(--color-primary-hover);
  
  --btn-line-border: var(--color-primary);
  --btn-line-color: var(--color-primary);
  --btn-line-hover: var(--color-primary-hover);

  /* Backgrounds (más coherentes, sin azules fríos) */
  --color-bg: #f2f3f7;
  --color-bg-two: #f7f8fa;
  --rgba-color-bg: 255,255,255,0.85;

  --color-card: #ffffff;
  --color-card-hover: #f4f5f9;
  --color-card-two: #fafafb;

  /* Neutrals */
  --color-border: #d8dbe5;
  --color-subtitle: #666b7c;
  --color-text: #1c1e24;
  --color-muted: #9fa4b4;

  /* Shadows */
  --btn-shadow: 0 4px 10px rgba(0,0,0,0.05);
  --btn-shadow-hover: 0 6px 16px rgba(0,0,0,0.08);

  /* Inputs (más limpios y consistentes) */
  --color-input-bg: #ffffff;
  --color-input-border: #d2d4dd;
  --color-input-placeholder: #a1a5b3;
  --color-input-text: #1a1c22;
  --color-input-focus: var(--color-primary);

  /* Pills */
  --color-pill: var(--color-primary);

  /* States (ligeros ajustes para que armonicen con grises suaves) */
  --color-success: #2eb58a;
  --color-danger: #e04c60;
  --color-warning: #d7a552;
}