:root {
  /* COLORES */
  /* basicos */
  --color-blanco: #fff;
  --color-negro: #212121;

  /* ESPACIADO  */
  --espaciado-0: 0;
  --espaciado-2: 2px;
  --espaciado-4: 4px;
  --espaciado-8: 8px;
  --espaciado-12: 12px;
  --espaciado-16: 16px;
  --espaciado-20: 20px;
  --espaciado-24: 24px;
  --espaciado-28: 28px;
  --espaciado-32: 32px;
  --espaciado-36: 36px;
  --espaciado-40: 40px;
  --espaciado-44: 44px;
  --espaciado-48: 48px;
  --espaciado-52: 52px;
  --espaciado-56: 56px;
  --espaciado-60: 60px;
  --espaciado-64: 64px;
  --espaciado-72: 72px;
  --espaciado-84: 84px;
  --espaciado-128: 128px;
  --espaciado-256: 256px;
  --espaciado-512: 512px;

  /* BORDER */
  /* border-width */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;

  /* border-radius */
  --br-ninguno: 0;
  --br-chico: 4px;
  --br-mediano: 8px;
  --br-regular: 12px;
  --br-grande: 16px;
  --br-circular: 50px;
  --br-pildora: 9999px;

  /* TOPOGRAFIA */
  /* pesos */
  --fw-ligero: 300;
  --fw-regular: 400;
  --fw-mediano: 500;
  --fw-grueso: 600;
  --fw-extra-grueso: 700;
  --fw-muy-grueso: 800;
  --fw-super-grueso: 900;

  /* tamaños */
  --fs-extra-grande: 22px;
  --fs-grande: 20px;
  --fs-mediano: 18px;
  --fs-regular: 16px;
  --fs-chico: 14px;
  --fs-extra-chico: 12px;

}

@media (prefers-color-scheme: light) {
  :root {
    /* COLORES */
    /* semanticos */
    --color-primario: hsl(198, 58%, 18%);
    --color-secundario: hsl(182, 50%, 36%);

    --color-fondo-pagina: #fff;
    --color-texto-primario: var(--color-primario);
    --color-texto-secundario: var(--color-secundario);
    --color-texto-neutral-primario: #212121;
    --color-texto-neutral-secundario: #4D4D4D;
    --color-texto-neutral-terciario: #737373;
    --color-texto-neutral-cuaternario: #9A9A9A;

    --color-exito-claro: #E8F6ED;
    --color-exito: #175E32;
    --color-exito-oscuro: #0D3F21;

    --color-advertencia-claro: #F6EEDE;
    --color-advertencia: #724513;
    --color-advertencia-oscuro: #4A2B0B;

    --color-error-claro: #FCEAEA;
    --color-error: #9B1717;
    --color-error-oscuro: #650D0D;

    --color-notificacion-claro: #EAF0FD;
    --color-notificacion: #1948AE;
    --color-notificacion-oscuro: #103276;

  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* COLORES */
    /* semanticos */
    --color-primario: hsl(198, 38%, 48%);
    --color-secundario: hsl(182, 30%, 66%);

    --color-fondo-pagina: #212121;
    --color-texto-primario: var(--color-primario);
    --color-texto-secundario: var(--color-secundario);
    --color-texto-neutral-primario: #E6E6E6;
    --color-texto-neutral-secundario: #9A9A9A;
    --color-texto-neutral-terciario: #737373;
    --color-texto-neutral-cuaternario: #4D4D4D;

    --color-exito-claro: #163D28;
    --color-exito: #84DBA4;
    --color-exito-oscuro: #A5E6BD;

    --color-advertencia-claro: #3B3217;
    /* --color-advertencia: #F2B83D; */
    --color-advertencia: #ECC97E;
    --color-advertencia-oscuro: #E0B77A;

    --color-error-claro: #431B1B;
    --color-error: #F09D9D;
    --color-error-oscuro: #FF9B9B;

    --color-notificacion-claro: #18294A;
    --color-notificacion: #94B4FF;
    --color-notificacion-oscuro: #9BB9F5;
  }
}