:root {
  /* Global colors */
  --white: #ffffff;
  --black: #000;
  --white-soft: rgb(244,244,244);
 
  /* Brand — suaves y elegantes */
  --color-primary: #6A85FF;
  --color-primary-hover: #5E76E6;
  --color-secondary: #9FA9FF;
  --color-accent: #D4D9FF;

  /* Gradiente suave premium */
  --color-gradient: linear-gradient(
    135deg,
    #6A85FF 0%,
    #8F9BFF 50%,
    #C7CEFF 100%
  );
    
     --hero-gradient: linear-gradient(
    to bottom,
    rgba(14, 15, 18, 0.35) 0%,   /* arriba muy suave */
    rgba(14, 15, 18, 0.85) 70%,  /* transición */
    #0E0F12 100%                 /* fondo base sólido */
  );
    
--color-overlay: rgba(14, 15, 18, 0.2);
    
  --btn-principal-bg: #fff;
  --btn-principal-color: #000;
  --btn-principal-hover: rgb(244,244,244);
  
  --btn-line-border: #fff;
  --btn-line-color: #fff;
  --btn-line-hover: #fff;

  /* Backgrounds */
  --color-bg: #0E0F12;
  --color-bg-two: #0B0C0E;
  --rgba-color-bg: 14, 15, 18,0.8;
  --color-card: #17191F;
  --color-card-hover: #1E2026;
  --color-card-two: #1B1D23;

  /* Neutrals */
  --color-border: #2A2D36;
  --color-subtitle: #9096A9;
  --color-text: #E6E8F3;
  --color-muted: #9BA0B4;

  /* Shadows */
  --btn-shadow: 0 4px 12px rgba(0,0,0,0.12);
  --btn-shadow-hover: 0 6px 16px rgba(0,0,0,0.18);

  /* Inputs */
  --color-input-bg: #22252E;
  --color-input-border: #2E323C;
  --color-input-placeholder: #9A9EB0;
  --color-input-text: #F1F3FA;
  --color-input-focus: var(--color-primary);

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

  /* States */
  --color-success: #4CC9A3;
  --color-danger: #E05C6E;
  --color-warning: #E6B86E;
}