/* Design tokens: única fuente de verdad de colores, sombras, radios y
   transiciones. Todo color nuevo debe definirse acá. */
:root {
  color-scheme: dark;

  --bg-main: #070a13;
  --bg-card: hsl(222, 25%, 15%);
  --bg-card-hover: hsl(222, 25%, 18%);
  --bg-input: hsl(222, 20%, 8%);
  
  --border-color: rgba(255, 255, 255, 0.07);
  --border-focus: hsl(14, 100%, 57%);

  --accent-orange: hsl(14, 100%, 57%);
  --accent-orange-hover: hsl(14, 100%, 50%);
  --accent-green: hsl(145, 63%, 49%);
  --accent-green-hover: hsl(145, 63%, 42%);
  --accent-red: hsl(354, 70%, 54%);
  --accent-red-hover: hsl(354, 70%, 47%);

  --text-main: hsl(210, 20%, 98%);
  --text-muted: hsl(218, 15%, 70%);
  --text-dark: hsl(222, 25%, 12%);

  --shadow-lg: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  --shadow-sm: 0 4px 12px -2px hsla(0, 0%, 0%, 0.3);
  --glass-bg: rgba(15, 23, 42, 0.45);
  --glass-border: rgba(255, 255, 255, 0.09);
  --blur-val: 25px;

  --radius-lg: 8px;
  --radius-md: 5px;
  --radius-sm: 3px;
  
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  --color-white: #fff;
  --color-emerald: #10b981;
  --color-slate-light: #e2e8f0;
  --color-mp-blue: #009ee3;
  --color-mp-blue-light: #00b1ea;
  --color-whatsapp: #25d366;