/* =========================
   🎨 DESIGN SYSTEM (VARIABLES)
========================= */
:root {

  /* =========================
     🎨 COLORES BASE
  ========================= */
  --bg-main: #383D49;
  --bg-secondary: #383D49;
  --bg-card: #343844;

  /* =========================
     🧾 INPUTS
  ========================= */
  --bg-input: #3B414F;
  --bg-input-hover: #484E5E;

  /* =========================
     🔲 BORDES
  ========================= */
  --border-default: #1E2129;
  --border-focus: #4fc3ff;

  /* =========================
     🔤 TEXTO
  ========================= */
  --text-primary: #ffffff;
  --text-secondary: #aaa;
  --text-placeholder: #777;
  --text-btn: #ffffff;
  --text-btn-hover: #1E2129;

  /* =========================
     🔘 BOTONES (GRADIENTE ROSA)
  ========================= */
  --btn-start: #4a0818;
  --btn-intermedio: #8a1230;
  --btn-medio: #c8183e;
  --btn-end: #ff5c77;

  /* =========================
     🔘 BOTÓN HOVER (AZUL)
  ========================= */
  --btn-hover-start: #1E2129;
  --btn-hover-intermedio: #2e7fa8;
  --btn-hover-medio: #4fc3ff;


  /* =========================
     📏 ESPACIADO
  ========================= */
  --space-xs: 7.5px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 20px;
  --space-xl: 45px;

  /* =========================
     📐 TAMAÑOS
  ========================= */
  --size-logo: 120px;
  --size-container: 380px;

  /* =========================
     🔲 BORDER RADIUS
  ========================= */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* =========================
     🌫 SOMBRAS
  ========================= */
  --shadow-main: rgba(0,0,0,0.5);
  --shadow-button: rgba(0,0,0,0.35);

  /* =========================
     ✨ EFECTOS
  ========================= */
  --focus-glow: rgba(79, 195, 255, 0.25);

  /* =========================
     🌊 ONDA
  ========================= */
  --wave-color: #1E2129;
  --top-bg-color: #282C36;
  --bottom-bg-color: #1E2129;
}